Question

我不明白为什么select元素的宽度比输入元素的宽度短，我将它们都设置为100％，但似乎输入由于某种原因覆盖了网格边界。 / p>

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像素，这使您的输入更大。为了阻止转移，我们从左右两侧取出填充物。实质上，你是说输入100％+ 6px + 6px，所以你的结果大于选择的100％设置。

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

Answer 3

这是已解决的Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

实际上，选择宽度默认比其输入表格小10％。在你的情况下

风格=＆＃34;宽度：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>

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

3 个答案: