4 
<div id="divL">
<input name="email" type="text" placeholder="input text">
<div class="divInput">divInput</div>
<div class="divtxt">divtxt</div>
<input name="sname" type="text" placeholder="input text">
<select name="srodstvo">
    <option value="1">select</option>
    <option value="2">323</option>
</select>
<div class="divtxt">divtxt</div>

</div>

CSS

*{
    margin:0;
    padding:0;
}
#divL{
    width:45%;
    margin:5vh 0 0 5vw;
    border:thin solid blue;
}
input[type="text"], .divtxt, .divInput, select{
    width:100%;
    margin:4px 0;
    padding:4px;
    border:thin solid #999;
    border-radius:3px;
}

所有元素都具有相同的边距、内边距和宽度。但是第二端和第三元素之间的距离不同并且select更短！？

小提琴在这里

4

3 回答 3

2

要固定宽度，请添加以下CSS规则：

input, select
{
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

要修复边距：添加display: inline-block到...

input[type="text"], .divtxt, .divInput, select
{
    width:100%;
    margin:4px 0;
    padding:4px;
    border:thin solid #999;
    border-radius:3px;
    display: inline-block;
}

这是它的工作原理：http: //jsfiddle.net/leniel/Y5aVB/4/embedded/result/

于 2013-09-06T15:20:26.770 回答
1

这是由于Box-Sizing。 Input有 box-sizing iscontent-box而selectis 默认情况下有border-boxas box-sizing。因此，您可以通过将其添加到标记中来更改选择的 box-sizing 属性

select
{
   box-sizing:content-box;
}

如果不设置此属性select，则其高度低于其他元素（在 Chrome 中）。

另一件事是在设置后你的元素仍然在父容器之外。这是因为你把它们放在width=100%一起padding : 4px，使它们比100%父母更大。所以只需从左右设置 0 填充。

Padding:4px 0;

对于第三个元素中的不均匀边距添加

display:inline-block;

更新 Js 小提琴

于 2013-09-06T15:14:38.297 回答
1

尝试添加第二个值padding

padding:4px 0;

小提琴

在 Firefox 23 中测试

截屏

更新：

要固定元素 2 和 3 之间的边距，请将所有 4 个边设置为padding

margin:4px 0 0 0;

要保持底部的间距，请padding在外部设置 adiv

padding:0 0 4px 0;

更新的小提琴

于 2013-09-06T15:17:53.167 回答