1

我试图让标签和输入字段填充整个宽度。这是我的尝试。这是 HTML

<form>
    <p>
        <label>Username:</label>
        <input/>
    </p>
</form>

和 CSS

form {
    widht: 400px height: 500px;
    background-color: lightgrey;
}
label {
    float: left;
}
input {
    width: 100%;
    box-sizing: border-box;
}

当我在输入字段中放置一个 with: 100% 时，它会移动到标签下方并且没有宽度，它太小了。有什么建议么 ？

4

3 回答 3

2

input在你的和集合周围使用一个包装元素overflow: hidden;（确保你使用一个block级别元素，如果你在你的 CSS中使用span而不是声明）display: block;

演示

<label>Blah Blah</label>
<div><input type="text" /></div>

label {
    float: left;
}
div {
    overflow: hidden;
}

input[type=text] {
    width: 100%;
}
于 2013-09-26T08:16:42.903 回答
1

you have to set width attribute properly.

Live Demo

label {
    float: left;
    width: 15%;
}
input {
    width: 83%;
    box-sizing: border-box;
}
于 2013-09-26T08:22:19.787 回答
0

如果您对其进行firebug，您将知道您的边框实际上是在容器p 上添加了一些填充。所以，如果你只是把边界没有，那么你会做得很好。如果您想使用边框并且不希望输入超出表单，那么您需要稍微缩短输入的宽度并应用边框，或者为您的表单提供一些填充。

试试这个 CSS

form {
 background-color: #D3D3D3;
 height: 500px;
 width: 400px;
}
form p{
 float: left;
 position: relative;
 width: 100%;
}
label {
 float: left;
 position: relative;
 width: 100%;
}
input {
 border:0;
 float: left;
 height: 20px;
 margin: 0 auto;
 padding: 0;
 position: relative;
 width: 100%;
}

这是演示

于 2013-09-26T09:19:56.997 回答