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％时，标签并且没有宽度太小。任何建议？

解决方案

在您的输入周围使用包装元素并设置 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％; 
} 
  




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

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

and CSS

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

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

Demo

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

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

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

这篇关于css：让输入字段填充剩下的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！