css:让输入字段填充剩下的空间 [英] css: let input field fill the space left
问题描述
我试图让一个标签和一个输入字段填充一个from的整个宽度。 这里是我的尝试。这是HTML
< form>
< p>
< label>使用者名称:< / label>
< input />
< / p>
< / form>
和CSS
form {
widht:400px height:500px;
background-color:lightgrey;
}
标签{
float:left;
}
input {
width:100%;
box-sizing:border-box;
}
当我在输入字段中输入:100%时,标签并且没有宽度太小。任何建议?
在您的 I'm trying to let a label and an input field fill the whole width of a from. Here is my attempt. This is the HTML and CSS When I put a with: 100% in the input field it moves below the label and without the width it is too small. Any suggestions ? Use a wrapper element around your
这篇关于css:让输入字段填充剩下的空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!输入
周围使用包装元素并设置 overflow:hidden; (如果您使用的是
block level元素,请确保使用
span
比在你的CSS中声明 display:block;
)
< label> Blah Blah< / label>
< div>< input type =text/>< / div>
标签{
float:left;
}
div {
overflow:hidden;
}
input [type = text] {
width:100%;
}
<form>
<p>
<label>Username:</label>
<input/>
</p>
</form>
form {
widht: 400px height: 500px;
background-color: lightgrey;
}
label {
float: left;
}
input {
width: 100%;
box-sizing: border-box;
}
input
and set overflow: hidden;
(Make sure you use a block
level element, if you are using span
than declare display: block;
in your CSS)<label>Blah Blah</label>
<div><input type="text" /></div>
label {
float: left;
}
div {
overflow: hidden;
}
input[type=text] {
width: 100%;
}