下面的代码是一个简单的 html 表单。我想要做的是使所有输入在表单面板内具有最大宽度，并且看起来类似于下图。
我尝试为面板内的所有输入设置最大宽度，但它似乎不起作用。任何帮助将不胜感激。
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}<body>
<div class="form-panel">
<div class="form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>最佳答案
您可以使用 flex-box 代替 table。
当您使用 display: table - 列将具有相同的宽度(没有 colspan 选项)
对每一列使用display: flex 并设置flex-grow: 1 这样所有元素都会增长并填充父级。
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
flex-grow: 1;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-panel {
background-color: #b7bcbe;
}<body>
<div class="form-panel">
<div class="form-row form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-row form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-row form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>关于HTML 表单输入宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51147625/