Clever Geek Handbook

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;
}

JSFiddle

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>
Run codeHide result


+1


source


try it. input isnt like a div, you have to give it a display value.



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


source






More articles:


All Articles