输入框宽度为100%,标签位于左侧

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>

这里是对该方法的解释.