Question

该页面来自ASP.NET项目。我们的想法是每个按钮都包含在其父级宽度的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上设置box-sizing:border-box以及display:block和float:left

Demo Fiddle

关于按钮高度，这是从您的大line-height值派生的，只需根据需要减少它。

Answer 2

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

改变这样的风格。 Fiddle

Css - 为什么输入全宽？

2 个答案:

Demo Fiddle