asp.net - Css - 为什么我的输入是全宽的？

Question

该页面来自 ASP.NET 元素。这个想法是每个按钮都包含在 a 中，该按钮的宽度是其父级宽度的 25%。然后按钮获得 td 宽度的 100%。这应该会创建始终具有相同大小的按钮。

但是，正如您在下面的 jsfiddle 链接中看到的那样，即使只有一个按钮，它也会获得完整的表格宽度。当 td 的宽度为 25% 时，这是为什么？

<table style="width: 90%;">
    <tbody>
        <tr style="">
            <td class="speed-agenda-button-container">
                <input type="button" class="speed-agenda-button"                         onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$speedBookingControl$ctl50','')" value="A lonely button" name="ctl00$ContentPlaceHolder1$speedBookingControl$ctl50">
            </td>
        </tr>
    </tbody>
</table>


.speed-agenda-button-container {
  background-clip: padding-box;
  height: 40px;
  padding: 2px 4px;
  width: 25%;
}

.speed-agenda-button {
  background-color: #FFFFFF;
  border-collapse: collapse;
  color: #000000;
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  line-height: 120px;
  margin: auto;
  outline: medium none;
  text-align: left;
  vertical-align: middle;
  width: 100%;
}

jsfiddle:http://jsfiddle.net/tA5vu/1/

额外的问题:在 Firefox 中，按钮高度看起来还不错，而在 Chrome 中它们变得非常高。为什么？

Answer 1

默认情况下，表格的宽度为 90%，单元格填充此宽度。由于您有一个只有一个单元格的表，虽然它设置为 25%，但这会留下未分配的表空间，因此它取而代之的是 90% 的表宽度。

如果您只使用一个单元格，则需要将表格宽度设置为 25%(这引出了一个问题，为什么要使用表格？)

看来最有效的解决方案是将 25% 的宽度从表格单元格类移至按钮类。

为了确保 25% 包括任何填充等，​​在按钮 css 以及 display:block 和 float 上设置 box-sizing:border-box :左

Demo Fiddle

关于按钮高度，这是从您的大 line-height 值派生的，只需适本地减少它即可。