ensuring that there is no wrapping and the children have a width of 100%

Would you like to have text inputs placed in a single line inside a div without manually setting their widths?

<div>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

div {
    width: 300px;
    white-space: nowrap;
}

input {
    width: 100%;
    display: inline-block;
}

JSFiddle

Even with the specified CSS, it may not work as expected if you don't want to set inputs' width manually. Is there another way to achieve this?

Answer №1

Here's a suggestion: when styling an input element, remember to specify a display value since it doesn't behave like a div.

input {
  width: 100%;
  display: inline-block; clear:both; display:block;
}

Answer №2

If you want the inputs to stretch equally based on the page width, you can achieve this by extending the fluid size of their container (the div) and applying the same fluid size to each input by setting their size to 33%. This way, all inputs will stretch with the full width of the div which in turn stretches according to the container or page it's placed in.

To implement this, you can use the following CSS:

div {
    width: 100%;
    white-space: nowrap;
}

input {
    width: 33%;
    display: inline-block;
}
<div>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to showcase top-rated posts from my feed of posts?

I have a basic PHP script that allows users to post without logging in. Once they submit their posts, the posts are displayed below in a feed similar to Facebook's news feed. I'm now looking to extract the three most liked posts and display them ...

Is there a way in JavaScript to track changes in CSS properties such as transitioning from "display:none" to "display:block"?

Is there a way to detect when the CSS property "display" of an image is changed by another JavaScript script or function and then execute some JS code? I tried using $(this).bind('propertychange', function(){}) but it doesn't work, and setIn ...

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

Tips on how to prevent a video from playing in the background of a popup even after it has been closed

After creating a video popup that plays upon clicking a button using jQuery, I encountered an issue where the video continues to play in the background even after closing the popup by clicking the close(X) button. Below is my code, can someone assist me in ...

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

What is the best way to create a mirrored effect for either a card or text using CSS

Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...

Position elements flush to the left and right

Is it possible to align the text in divs so that it perfectly lines up along the edges? .name { margin: 0 0 5px 10px; font-weight: bold; font-size: 14px; } .row { margin: 0 0 5px 10px; width: 500px; justify-content: space-between; } < ...

Tips for positioning two elements side by side in an li element without needing to clear each time

I'm struggling with a stacked list that involves floating an image (icon) alongside text. The constant need to clear after each list item is becoming cumbersome. Anyone have any suggestions for making this more streamlined and tidy? <ul> < ...

Troubleshooting problems with the width of a Bootstrap navbar

I'm encountering a frustrating issue with my bootstrap menu. When I include the "navbar Form" in the menu, the width of the menu extends beyond the screen width in mobile mode (when resizing the browser window or viewing on a mobile device). Interesti ...

The behavior of the CSS Position property is exhibiting unique characteristics when used in

I am encountering an issue where an image is displaying differently based on the position attribute in Firefox compared to Chrome and IE11. Take a look at the preview on . Notice how the bottom tip of "Fountain Valley" is incorrectly positioned in Firefox ...

Styling with CSS and using templates

Just had a quick question about CSS and a template I'm working with. Currently, I have these two fields in my CSS: .content { padding:10px; width: 100% text-align:justify; font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif; } ...

Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" o ...

Create a mobile-friendly version of the website that retains all the functionality and features of the desktop

Currently, I am in the process of optimizing my website for mobile devices. However, creating a separate subdomain and folder for a new mobile version is proving to be a challenge since it was not originally requested. How can I ensure that the website ap ...

Tips for designing websites using HTML and CSS

current result: https://i.sstatic.net/eXLPv.png desired output: https://i.sstatic.net/vgl6z.png I am aiming to center the text. add image description here add image description here ...

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

I am curious if there is a feature in intro.js that allows for the highlighting of text or images to

I am having trouble getting intro.js to work with Ionic 4 as the highlighted text is not showing up view image here This is how I implemented the code in Angular 7: intro() { let intro = introJs.introJs(); intro.setOptions({ exitOnOverlayClick: false, ...

By default, the D3 hierarchy will collapse to the first level

I've been working on code to create an indented tree structure. My goal is to initially collapse the tree and show only the first level children or the root node. I tried a few different approaches, but none were successful. The current portion I have ...

The mat-pagination component's mat-select feature is displaying unusual behavior

In a recent project I have created, users need to perform CRUD operations and view the output in a table. Everything is functioning properly, however, there are instances where the "mat-select" within the "mat-paginator" starts behaving strangely. This iss ...

Determine the body's height by adding the heights of the header and footer

In my design, there is a header with a height of 8rem; .header { top: 0; left: 0; height: 8rem; } Following that, there is a footer with a height of 5rem; footer { width:100%; height: 5rem; } I am attempting to calculate the heig ...