Textbox to fill space | 易学教程

问题

Consider the following.

2 DIVS - the left one of known width, the right one of unknown width.

We can make the right-hand side fill the remaining space, however if I exchange the right-hand DIV to a textbox, it then does not fill the space, but wraps below the left-hand div.

Here's a fiddle: example

<div>
    <div id="left">
        left
    </div>
    <input type="textbox" id="right">
        right
    </input>
</div>

#left {
    float:left;
    width:180px;
    background-color:#ff0000;
}
#right {
    width: 100%;
    background-color:#00FF00;
}

I'm confused - any advice?

Still not behaving as it should!

New fiddle here: updated fiddle

回答1:

JSFiddle Inputs are inline bydefault and only the Block level elements can aquire the remaining space left after a floating element. So you should change the display property for input to block i.e. display:block

 #left {
     float:left;
     width:180px;
     background-color:#ff0000;
 }
 #right { 	
     display:block;
     background-color:#00FF00;
 }

 <div>
     <div id="left">
         left
     </div>
     <input type="textbox" value="right" id="right"/>
 </div>

EDIT: http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ using Calc.

回答2:

Using Calc

If You wanted to set the width of only a single element, you may want to look at the calc() option.

Something like:

width: calc(100% - width px);

in which could be incorporated into most projects nowadays, as you can see from its browser support.

You could also make use of the auto width:

.secondElement{
  width:auto;
}

to fill the space left

Have a look here...

* {
  margin: 0;
  padding: 0;
}
div {
  display: inline-block;
  width: 50%;
  background: blue;
}
input {
  width: 50%;
  display: inline-block;
}
.fix {
  border: none;
  background: gray;
}
.now {
  width: 49.5%;
}
.nowNew {
  width: auto;
}

<div>Div on left</div>
<input type="text" placeholder="text here" />

<br/>Notice the lengths aren't the same? Yet both are defined as 50%?
<br/><br/>
<br/>That's due to the border around the input!
<br/><br/><br/>

<div>Div on left</div><input class="fix" type="text" placeholder="text here" />

<br/><br/>
<br/>To fix 'stuff' like this, I feel the general rule in web dev. is to aim to make it 99.9% instead:
<br/><br/><br/>
<div class="now">Div on left</div><input class="now" type="text" placeholder="text here" />

<br/><br/>
<br/>Or make the input width auto:
<br/><br/><br/>
<div>Div on left</div>
<input class="nowNew" type="text" placeholder="text here" />

回答3:

You can accomplish this using display: table and display: table-cell.

JSFIDDLE

HTML:

<div class="container">
    <div id="left">
        left
    </div>
    <input type="textbox" value="right" id="right" />
</div>

CSS:

#left {
    display: table-cell;
    width: 180px;
    background-color:#ff0000;
}
#right {
    display: table-cell;
    width: 100%;
    background-color:#00FF00;
}
.container {
    display: table;
    width: 100%;
}

来源：https://stackoverflow.com/questions/27945571/textbox-to-fill-space

标签

html

css

css-float