Question

有没有人知道怎么做？我创建了这个小提琴http://jsfiddle.net/matusko/2pctr9ok/3/，我想要做的就是输入的行为与上面的div相同。

CSS：

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

HTML：

<div>
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>
<br/>
<div>
    <div class="left">
        left
    </div>
    <input type="text" placeholder="right" class="right"/>
</div>

我不明白为什么输入不像div那样，即使当专业检查员说它的显示是阻塞的时候。

Answer 1

您可以在CSS中使用calc为您动态计算宽度。

以下示例：

.left {
  float: left;
  width: 180px;
  background-color: #ff0000;
}
.right {
  width: calc(100% - 180px);
  background-color: #00FF00;
  display: inline-block;
}
input[type="text"] {
  box-sizing: border-box;
  width: 100%;
}

<div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<br/>
<div>
  <div class="left">left</div>
  <div class="right">
    <input type="text" placeholder="right" />
  </div>
</div>

Answer 2

对于＆lt; IE9我会建议以下http://jsfiddle.net/2pctr9ok/4/

将左下角放在position:absolute中，将整个底部块放在overflow:hidden中，并在输入上应用padding-left:180px。

Answer 3

看起来宽度：100％导致问题。更改输入的宽度将使其与左div相同。

input.right {
    width: 77%;
}

http://jsfiddle.net/vov70ymd/

不完美，但希望有所帮助。

如何输入[type = text]来填充剩余的水平空间？

3 个答案: