Question

我正在尝试使用100％宽度的流体输入盒，同时将标签浮动到左侧。这是我现在拥有的：

.left {
  float: left;
}

input {
  width: 100%;
}

<form>
    <label class="left">Name:</label>
    <input class="left" id="name" name="name"/>
    <div class="clear"></div>
</form>

这可行，但它会下降到标签下方。如果我使用父div来分配浮点数，那么它不会超过100％。有什么想法吗？

谢谢！

Answer 1

请参阅： http://jsfiddle.net/r2769/ （调整窗口大小）

<强> CSS：

.left {
    float: left;
}

.left2 {
    overflow: hidden;
    display: block;
    padding: 0 4px 0 10px
}
.left2 input {
    width: 100%
}

<强> HTML：

<form>
    <label class="left" for="name">Name:</label>
    <span class="left2"><input id="name" name="name" /></span>
</form>

方法is here的解释。

Answer 2

我最近在css中找到了关于calc的信息：

width: calc(100% - 100px);

这可以用来解决这个问题：jsfiddle here

HTML：

<div class="setting">
    label
    <input class="s2"/>
</div>

CSS：

.setting {
    position: relative;
    width: 100%;
}
.setting .s2 {
    position: absolute;
    left: 180px;
    width: calc(100% - 184px);
}

输入框宽度为100％，标签位于左侧

2 个答案: