Question

我尝试过很多不同的东西并在网上查看，但我无法想象如何将我的盒子放在一个对齐且尺寸相同的盒子中。

我正在使用表单并在表单内部。该表作为一个类，从那里我尝试给我的输入提供宽度和高度，并选择：

table.form-override {
    border-collapse: collapse;
}
table.form-override tr td {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-bottom: 5px;
}
table.form-override label {
    padding-right: 10px;
    vertical-align:center;  
}
table.form-override input, select, option {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
table.form-override input, select {
    width: 300px;
    height: 35px;
    border : 1px #ccc solid;
    vertical-align: center;
}

但当然，它不起作用。

我怎样才能做到这一点？

感谢。

Answer 1

您的CSS工作正常 - 请参阅http://codepen.io/raad/pen/FniEy

</style>
body, td, form {
  padding: 5px;
}
table.form-override {
    border-collapse: collapse;
    background-color: #fdf;
}
table.form-override tr td {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding-bottom: 5px;
}
table.form-override label {
    padding-right: 10px;
    vertical-align:center;  
}
table.form-override input, select, option {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
table.form-override input, select {
    width: 300px;
    height: 35px;
    border : 1px #ccc solid;
    vertical-align: center;
}
</style>

<form>
  <table class="form-override">
    <tr>
      <td>Hello</td>
      <td><input type="text" /></td>
    </tr>
    <tr>
      <td>World</td>
      <td>
        <select>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
      </td>
    </tr>
  </table>
</form>

您可能需要重置Normalize或Reset。

虽然这些更多用于减少默认对象指标中的浏览器不一致性，但它们可能有助于为不同的对象提供相同的指标。

CSS使选择框的大小与输入文本框的大小相同

1 个答案: