极客观点
项目管理
HarmonyOS
我需要你的帮助。
我的想法是在页面上有 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>
原文由 Jason Kelly 发布，翻译遵循 CC BY-SA 4.0 许可协议
你很亲密。
Border-box 是你的朋友，有一些默认的浏览器样式正在妨碍你。我在字段集和输入中添加了边框框。因为您有填充并且字段集上有一些默认边距和边框，所以百分比最终大于 100%。删除默认边距并向字段集添加边框解决了这些问题：
http://jsfiddle.net/U46V7/
Border-box 更改宽度属性以在其宽度计算中包括填充和边框。因此，#field1 之前设置为 70% 宽度 + 左右填充 3px + 左右边框 1px，通过添加
box-sizing:border-box;您设置的 70% 宽度包括边框和填充.