入力要素の幅が選択要素の幅よりも短い

Question

なぜ選択要素の幅が入力要素の幅よりも短いのか分かりません。両方を100％に設定していますが、入力何らかの理由でグリッド境界をオーバーレイします。

HTML：

<div class="gridView"> 
    <input type="text" placeholder="Name" /> 
    <input type="text" placeholder="Last Name" /> 
    <select></select> 
    <input type="text" placeholder="Birth Date" /> 
    <select> </select> 
    <select> </select> 
    <input type="text" placeholder="Passport Number" /> 
    <span> 
    <input placeholder="Passport Expiry Date"/> 
    <span class="dateFormat">YYYY-MM-DD</span> 
    </span> 
</div> 

CSS：

input { 
    width: 100%; 
    padding: 6px; 
    height: 25px; 
} 
select { 
    height: 41px; 
    width:100%; 
} 
.gridView { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-column-gap: 25px; 
    grid-row-gap: 10px; 
    font-family: sans-serif; 
    margin: auto; 
    width: 50%; 
} 
.dateFormat { 
    color: red; 
    font-size: small; 
    display: block; 
    margin-left: 15px; 
    margin-bottom: 5px; 
    font-weight: bold; 
} 

JSFIDDLE
https://jsfiddle.net/AlexLavriv/oxmq71sn/1/

Answer 1

あなたがのために追加のパディングを適用していますinputであるが、selectではそうではない。等しい幅にそれらを取得するには、サイズの計算方法を更新する必要があります。ここでは

input, select { 
    width: 100%; 
    box-sizing: border-box; 
} 

Answer 2

が

.registerForm { 
 
    font-family: sans-serif; 
 
    margin: auto; 
 
    width: 50%; 
 
} 
 
input { 
 
    width: 100%; 
 
    padding: 6px; 
 
    height: 25px; 
 
} 
 

 
    
 

 
select { 
 
    height: 41px; 
 
    width: 110%; 
 
} 
 
.gridView { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-column-gap: 25px; 
 
    grid-row-gap: 10px; 
 
} 
 
.dateFormat { 
 
    color: red; 
 
    font-size: small; 
 
    display: block; 
 
    margin-left: 15px; 
 
    margin-bottom: 5px; 
 
    font-weight: bold; 
 
}

<div class="registerForm"> 
 
    <div class="gridView"> 
 
     <input type="text" placeholder="Name" /> 
 
     <input type="text" placeholder="Last Name" /> 
 
     <select></select> 
 
     <input type="text" placeholder="Birth Date" /> 
 
     <select> </select> 
 
     <select> </select> 
 
     <input type="text" placeholder="Passport Number" /> 
 
     <span> 
 
     <input placeholder="Passport Expiry Date"/> 
 
     <span class="dateFormat">YYYY-MM-DD</span> 
 
     </span> 
 
    </div> 
 
</div>

Fiddleを解決している実際に選択の幅は、その入力いとこに10％低いデフォルトであります.. あなたの場合a

style = "width：110％;

はギャップ

<div class="registerForm"> 
    <div class="gridView"> 
     <input type="text" placeholder="Name" /> 
     <input type="text" placeholder="Last Name" /> 
     <select style="width:110%;"></select> 
     <input type="text" placeholder="Birth Date" /> 
     <select style="width:110%;"> </select> 
     <select style="width:110%;"> </select> 
     <input type="text" placeholder="Passport Number" /> 
     <span> 
     <input placeholder="Passport Expiry Date"/> 
     <span class="dateFormat">YYYY-MM-DD</span> 
     </span> 
    </div> 
</div> 

Answer 3

を埋めるいっぱいになったあなたは、パディングトップとパディング下にパディング変更してみてください。あなたはあなたの入力を大きくする入力の周りに6 pxを置いています。シフトを止めるために、パディングを左右からずらします。本質的には、入力を100％+ 6px + 6pxにすると、結果は選択の100％よりも大きくなります。

input { 
width: 100%; 
padding-top: 6px; 
padding-bottom: 6px; 
height: 25px; 
}