CSS输入类型文本和类型选择行为

Question

我为input type = text和type = select设置了相同的宽度（100％）。 为什么如果我并排放置输入字段type = text看起来比输入类型=选择大？ 我怎样才能解决这种奇怪的行为？

<div class="tbl">
  <div class="cell">
   <label>Year</label>
   <select name="modello">
       <option></option>
   </select>
  </div>
  <div class="cell">
   <label>Year</label>
   <input type="text" />
  </div>
</div>

<div class="tbl">
  <div class="cell">
   <label>Year</label>
   <select name="modello">
       <option></option>
   </select>
  </div>
  <div class="cell">
   <label>Year</label>
   <select name="modello">
       <option></option>
   </select>
  </div>
</div>

<div class="tbl">
  <div class="cell">
   <label>Year</label>
    <input type="text" />
  </div>
  <div class="cell">
   <label>Year</label>
   <input type="text" />
  </div>
</div>

CSS

.tbl {
  display: table;
  width: 100%;
}

.cell {
  display: table-cell;
  padding: 5px;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

input {
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
}

select {
  height: 30px;
  line-height: 30px;
}

JSFIDDLE

Answer 1

您没有设置父元素（td）的宽度。您可以将宽度设置为50％：

＆＃13;

＆＃13;

.tbl {
  display: table;
  width: 100%;
}
.cell {
  display: table-cell;
  padding: 5px;
  width: 50%;/*set the width to 50%*/
}
input,
select,
textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
input {
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
}
select {
  height: 30px;
  line-height: 30px;
}

＆＃13;

<div class="tbl">
  <div class="cell">
    <label>Year</label>
    <select name="modello">
      <option></option>
    </select>
  </div>
  <div class="cell">
    <label>Year</label>
    <input type="text" />
  </div>
</div>

<div class="tbl">
  <div class="cell">
    <label>Year</label>
    <select name="modello">
      <option></option>
    </select>
  </div>
  <div class="cell">
    <label>Year</label>
    <select name="modello">
      <option></option>
    </select>
  </div>
</div>

<div class="tbl">
  <div class="cell">
    <label>Year</label>
    <input type="text" />
  </div>
  <div class="cell">
    <label>Year</label>
    <input type="text" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;