输入框100％宽度，标签左侧 [英] Input box 100% width, with label to the left

问题描述

我试图有一个流畅的输入框具有100％的宽度，而标签浮在左边。这是我目前有的：

I'm trying to have a fluid input box with 100% width, while having the label floated to the left. Here's what I currently have:

.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％。任何想法？

This works, however it drops down below the label. If I use a parent div to assign the floats, then it doesn't span 100%. Any ideas?

谢谢！

推荐答案

： 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>

方法说明在这里。

这篇关于输入框100％宽度，标签左侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！