获取2个相邻的（并排）相邻的fieldsets

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

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

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

我怎样才能很好地并排获取字段集？

这里发生了什么事的快速PIC： 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>

来源

2014-04-04 Jason Kelly

看到这个帖子，这是一个相当类似的问题： http://stackoverflow.com/questions/22696467/form-w ith-two-columns/22696576＃22696576 – Pete

你非常接近。

边框是你的朋友，并有一些默认的浏览器样式，你的方式。我添加了边框到字段集以及输入。由于您有填充且您的字段集中存在一些默认边距和边框，因此百分比最终大于100％。删除默认的利润率和增加边界框在表单该解决这些问题：

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

http://jsfiddle.net/U46V7/

边界框的宽度将更改属性，包括填充和边框在它的宽度计算。因此，在＃field1被设置为70％宽度+ 3px填充左侧和右侧+ 1px边界左侧和右侧之前，通过添加box-sizing:border-box;您设置的70％宽度包括边框和填充。

来源

2014-04-04 17:19:40

是的，我也几乎相同：对

箱尺寸是解决方案！

字段集： http://jsfiddle.net/8dSnw/5/

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

只有输入：

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

来源

2014-04-04 17:24:13 Ploppy

将两个字段集到一个表：

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

来源

2014-09-04 14:14:20

您还应该将两个''封装在'' – RevanProdigalKnight

获取2个相邻的（并排）相邻的fieldsets

回答

相关问题