在悬停时更改字体（粗体/斜体）以进行显示：表格单元格缩小宽度答案

【问题标题】：changing font (bold/italic) on hover for display:table-cell shrinks width在悬停时更改字体（粗体/斜体）以进行显示：表格单元格缩小宽度
【发布时间】：2012-10-30 19:38:34
【问题描述】：

正如标题所说。将鼠标悬停在显示为更改字体粗细的表格单元格的 li 上时，宽度会缩小/增大。

我在 ul 上使用 display:table 因为我需要 lis 来均匀地跨越容器

这是一个 jsFiddle：http://jsfiddle.net/elzi/trXn4/5/ 已更新。

也许没有真正动态的方法来做到这一点，我需要为一些 lis 设置一些宽度并包含更多文本？

【问题讨论】：

标签： css

【解决方案1】：

是的，表格会缩小/扩大，以便为最多的内容提供最多的空间，除非您另有说明。

您可以将width: 25%; 添加到您的li (Fiddle)，也可以将table-layout: fixed; 添加到ul (Fiddle)。

【讨论】：

我在小提琴中举了一个不好的例子，因为并非所有文本的宽度都相同...例如：jsfiddle.net/elzi/trXn4/5
@elzi 这是 HTML 中tables 的根本问题。您甚至可能只需要使用 jQuery 在加载时使用 .outerWidth() 获取每个表格单元格的宽度，然后将其应用为内联样式。

【解决方案2】：

当然可以：）如果您的列表项是静态的，您可以通过添加来设置固定宽度

width: xxxpx;

到 li 定义

【讨论】：

但是有些 lis 比其他的要大...jsFiddle 是个坏例子
好吧，如果它们仍然是静态的，您可以为每个 li 设置宽度...通过更改字体粗细，您正在更改 li 内容的大小。因此，除非您固定宽度，否则它会根据需要扩大/缩小以适应其内容。