Question

我需要你的帮助。

我的想法是在页面上有2个字段集，它们是页面的100％宽度并且彼此相邻。选择的浏览器是（IE10）

目前，它们似乎并不符合我们希望他们做的事情。

现在看来，它们仍然堆叠在一起。

如何将字段集并排放置？

在这里快速了解正在发生的事情： enter image description here

这是标记：

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

Answer 1

是的，我几乎一样：p

盒子大小是解决方案！

fieldset： http://jsfiddle.net/8dSnw/5/

input{
    float: left;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
}

仅输入：

http://jsfiddle.net/8dSnw/3/

Answer 2

你非常接近。

边框是您的朋友，并且有一些默认的浏览器样式会妨碍您。我将border-box添加到fieldset以及输入。因为您有填充，并且您的字段集上有一些默认边距和边框，所以百分比最终大于100％。删除默认边距并将边框添加到字段集可解决这些问题：

fieldset, input {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
fieldset {
    margin:0;
}

http://jsfiddle.net/U46V7/

Border-box更改width属性以在其宽度计算中包含填充和边框。因此，＃field1设置为70％宽度+ 3px填充左右+ 1px边框左右，通过添加box-sizing:border-box; 70％宽度，您设置包括边框和填充。< / p>

Answer 3

将两个字段集插入一个表中：

<table> <td> Fieldset1 </td> <td> Fieldset2 </td></table>.

使2个场集相邻（并排）彼此相邻

3 个答案: