White-space: nowrap and kids with 100% width
I have some text inputs (it may vary in number), I need to put them in a div, stretch them to full width, but in one line.
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
div {
width: 300px;
white-space: nowrap;
}
input {
width: 100%;
display: inline-block;
}
But it doesn't work, I expected. I don't want to set the width of the inputs manually (in px). Is it possible?
+3
source to share
2 answers
Assuming you are trying to keep the inputs stretched equally to fit the page.
It is a matter of expanding the liquid size of their container, div, and then applying the same liquid size to the inputs (assuming each is equal), setting them to 33%. These, in turn, will stretch to the full width of the div, which will stretch to the full width of the container (or page).
div {
width: 100%;
white-space: nowrap;
}
input {
width: 33%;
display: inline-block;
}
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
+1
source to share