Question

我试图让标签和输入字段填充from的整个宽度。 Here是我的尝试。这是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;
}

当我在输入字段中输入100％时，它会移动到标签下方而没有宽度，因此它太小了。有什么建议吗？

Answer 1

在input周围使用包装元素并设置overflow: hidden;（如果您使用block，请确保使用span级元素，而不是声明display: block;在你的CSS中）

Demo

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

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

input[type=text] {
    width: 100%;
}

Answer 2

您必须正确设置width属性。

<强> Live Demo

label {
    float: left;
    width: 15%;
}
input {
    width: 83%;
    box-sizing: border-box;
}

Answer 3

如果你偷偷摸摸，你会知道你的边框实际上是在容器p上放了一些填充物。所以，如果你只是将边界设置为无，那么你将会很高兴。如果你想使用border并且不希望输入超出表单，那么你需要缩短输入的宽度并应用border或者为表单添加一些填充。

试试这个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%;
}

以下是DEMO

css：让输入字段填充剩下的空格

3 个答案: