Question

我有一个有趣的盒子模型/宽度/继承问题，我很困惑。基本上，这就是我所拥有的：

<table>
  <tr>
    <td>
      <div><input type="text">So the td is at least this big</input></div>
      <div>
        <button>The Fish Molecular Genetics and Biotechnology Laboratory</button>
        <button>Each button must be as wide as the widest one</button>
      </div>
    </td>
  </tr>
<table>

在此简化模型中，<td>具有（并且必须具有）自动宽度，<button>具有100％宽度和display:block;，因此所有按钮的宽度相同，{{1还有一些填充，几乎所有东西都有<button>。

因此，当渲染按钮时，其框宽将设置为其包含的文本的宽度。但是哦等等，它的盒子宽度是从边框到边框测量的，它有一个填充，所以文本实际上包裹到下一行。并且它必须是边界框，因为在上述简化模型中不明显的许多好理由。并且td必须具有自动宽度，因为按钮会根据文本框中的内容实时更改。

Answer 1

这是一个不错的解决方案，但我仍然认为这可以作为一个错误。

<div>
  <button><span>The Fish Molecular Genetics and Biotechnology Laboratory</span></button>
  <button><span>Each button must be as wide as the widest one</span></button>
</div>

与

button {padding:0;}
button span {margin:1em;}

修改
这里发生了不止一件事。第二个问题是ems。当文本的容器宽度呈现为328.00003654像素时，显然文本换行可能会出错。切换到span {margin:固定的像素单位。

边框100％宽度计算 - 文本不适合

1 个答案: