输入和选择字段具有不同的长度

Question

我有一个包含不同类型字段的表单。表单的宽度设置为100%，其字段也是如此，但它们的长度不同。为什么HTML表单的输入和选择字段有不同的长度以及如何解决这个问题？这是小提琴：https://jsfiddle.net/vaxobasilidze/kw8u9gdz/2/

＆＃13;

＆＃13;

.adapterSettings table {
	width: 100%;
}

.adapterInput select {
	width: 100%;
}
.adapterInput input {
	width: 100%;
}
.dvb-t2-s2 {
	width: 100%;
}

＆＃13;

<form>
  <table class="dvb-t2-s2">
    <tr>
      <td>Frequency:</td>
      <td class="adapterInput">
        <select>
          <option value="S">DVB-S</option>
          <option value="T">DVB-T</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Stream ID:</td>
      <td class="adapterInput">
        <input type="number" >
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="adapterInput">
        <input type="submit" style="float: right;">
      </td>
    </tr>
  </table>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将“box-sizing: border-box;'添加到此元素或仅添加到您的css中的所有元素：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

<强> SNIPET

.adapterSettings table {
	width: 100%;
  box-sizing: border-box;
}

.adapterInput select {
	width: 100%;
  box-sizing: border-box;
}
.adapterInput input {
	width: 100%;
  box-sizing: border-box;
}
.dvb-t2-s2 {
	width: 100%;
}

<form>
  <table class="dvb-t2-s2">
    <tr>
      <td>Frequency:</td>
      <td class="adapterInput">
        <select>
          <option value="S">DVB-S</option>
          <option value="S2">DVB-S2</option>
          <option value="T">DVB-T</option>
          <option value="T2">DVB-T2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Stream ID:</td>
      <td class="adapterInput">
        <input type="number" >
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="adapterInput">
        <input type="submit" style="float: right;">
      </td>
    </tr>
  </table>
</form>

Answer 2

它与盒子大小有关 - 它是否包括边框，填充和宽度边距。如果您在border-box中设置了box-sizing，那么您的问题就会解决：

.adapterInput * {
    box-sizing: border-box;
}

Answer 3

border-left + padding-left + content + border-right + padding-right = total-width

select element：

1px + 0px + 993px + 1px + 0px = 995px;

number element：

2px + 0px + 995px + 2px + 0px = 999px;

submit element：

2px + 6px + 979px + 2px + 6px = 995px;

所以number element的宽度比其他元素高4px，这里有2 ways来修复它：

1）使用box-sizing：

插入此代码：

* {
  box-sizing: border-box;
}

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.adapterSettings table {
  width: 100%;
}

.adapterInput select {
  width: 100%;
}
.adapterInput input {
  width: 100%;
}
.dvb-t2-s2 {
  width: 100%;
}

＆＃13;

<form>
  <table class="dvb-t2-s2">
    <tr>
      <td>Frequency:</td>
      <td class="adapterInput">
        <select>
          <option value="S">DVB-S</option>
          <option value="T">DVB-T</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Stream ID:</td>
      <td class="adapterInput">
        <input type="number" >
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="adapterInput">
        <input type="submit" style="float: right;">
      </td>
    </tr>
  </table>
</form>

＆＃13;

＆＃13;

＆＃13;

2）使用calc：

.adapterInput input {
  width: calc(100% - 4px);
}

.adapterInput input[type="submit"] {
  width: 100%;
}

＆＃13;

＆＃13;

.adapterSettings table {
  width: 100%;
}

.adapterInput select {
  width: 100%;
}

.adapterInput input {
  width: calc(100% - 4px);
}

.adapterInput input[type="submit"] {
  width: 100%;
}
.dvb-t2-s2 {
  width: 100%;
}

＆＃13;

<form>
  <table class="dvb-t2-s2">
    <tr>
      <td>Frequency:</td>
      <td class="adapterInput">
        <select>
          <option value="S">DVB-S</option>
          <option value="T">DVB-T</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Stream ID:</td>
      <td class="adapterInput">
        <input type="number" >
      </td>
    </tr>
    <tr>
      <td></td>
      <td class="adapterInput">
        <input type="submit" style="float: right;">
      </td>
    </tr>
  </table>
</form>

＆＃13;

＆＃13;

＆＃13;