使 2 个字段集彼此相邻（并排）
我需要你的帮助。
我的想法是在页面上有 2 个字段集，它们是页面的 100% 宽度并且彼此相邻。选择的浏览器是 (IE10)
现在，他们似乎没有遵守我希望他们做的事情。
就目前的情况而言，它们仍然彼此堆叠在一起。
我怎样才能很好地并排获得字段集？
这是正在发生的事情的快速图片：
这是标记：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
fieldset {
padding: 3px;
width: 300px;
float: left;
}
#field1 {
width: 70%;
}
#field2 {
width: 30%;
}
label {
float:left;
font-weight:bold;
}
input {
width: 100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<fieldset id="field1">
<legend>Message Centre</legend>
<input type="text">
</fieldset>
<fieldset id="field2">
<legend>File Number</legend>
<input type="text">
</fieldset>
</body>
</html>
你们非常接近。
Border-box 是你的朋友，有一些默认的浏览器样式会妨碍你。我将边框框添加到字段集和输入中。因为您有填充，并且字段集上有一些默认边距和边框，所以百分比最终大于 100%。删除默认边距并向字段集中添加边框可以解决以下问题：
fieldset, input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
fieldset {
margin:0;
}
Border-box 更改宽度属性以在其宽度计算中包含填充和边框。因此，像之前一样，#field1 设置为 70% 宽度 + 左右 3px 内边距 + 左右 1px 边框，通过添加box-sizing:border-box;您设置的 70% 宽度，包括边框和内边距。
| 归档时间： |
|
| 查看次数： |
19998 次 |
| 最近记录： |