输入元素宽度小于选择元素宽度[重复]

Question

我不明白为什么select元素的宽度比输入元素的宽度短，我都设置为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

尝试将填充更改为填充顶部和填充底部。您在输入周围放置了 6 px，这使您的输入更大。为了停止移位，我们将填充物从左右两侧移开。本质上，您是说输入 100%+6px+6px，因此您的结果大于为选择设置的 100%。

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

Answer 3

这是已解决的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%.. 在你的情况下

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>