要填写的文本框 space

Question

考虑以下因素。

2 DIVS - 左边已知宽度，右边未知宽度。

我们可以让右侧填充剩余的 space，但是如果我将右侧 DIV 换成文本框，它就不会填充 space , 但在左下方 div.

这里是 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;
}

我很困惑 - 有什么建议吗？

仍然没有表现出应有的行为！

此处新增 fiddle：updated fiddle

Answer 1

JSFiddle 默认情况下输入是内联的，只有块级元素可以获取浮动元素之后剩余的space。因此，您应该将输入的 display 属性更改为 block 即 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>

编辑： http://jsfiddle.net/naeemshaikh27/MHeqG/1522/ 使用 Calc.

Answer 2

您可以使用 display: table 和 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%;
}

Answer 3

使用计算器

如果您只想设置单个元素的宽度，您可能需要查看 calc() 选项。

类似于：

width: calc(100% - width px);

其中可以纳入当今大多数项目，正如您从其 browser support 中看到的那样。

您还可以使用 auto 宽度：

.secondElement{
  width:auto;
}

补space左

看看这里...

* {
  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" />

要填写的文本框 space

Textbox to fill space

html

css

css-float