输入元素宽度短于选择元素宽度

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

这里是解决Fiddle

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

其实选择宽度为默认较小的10％，其输入的表弟..你的情况 一个

风格=“宽度：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

试着改变你填充到填充顶和padding-底部。你在输入周围放置6个像素，这会使你的输入变大。为了阻止轮换，我们从左侧和右侧取下填充物。实质上，你说的是输入100％+ 6px + 6px，所以你的结果比选择的100％大。

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