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;
}

すべての要素のマージン、パディング、および幅は同じです。しかし、2 番目の端と 3 番目の要素の間の距離が異なり、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 に答える