如何为块元素设置动态宽度？答案

【问题标题】：How do I set dynamic width to a block element?如何为块元素设置动态宽度？
【发布时间】：2012-06-23 23:35:39
【问题描述】：

我有 30 个元素，其类 .lollipop 具有 line-height: 30px; height: 30px;。

<a class="lollipop">Random text</a>
<a class="lollipop">Random text longer</a>
<a class="lollipop">Short</a>
...

如何编写 CSS 以使其具有动态宽度（它们的宽度会根据其中的文本量进行调整，就像通常那样）并且每行只有一个这些元素，可能不添加其他 HTML 元素？

【问题讨论】：

标签： html css

【解决方案1】：

可能最简单的方法是：

a {
    float: left;
    clear: left;
}

有了这个，您不必更改 HTML。

【讨论】：

【解决方案2】：

如果您希望所有链接的宽度相等，您可以尝试display: table-row，灵活宽度被计算为链接的最大宽度。

或者您可以使用 :before 伪来创建一种没有浮动和清除的清除，以防它导致您的设计出现问题。

【讨论】：

值得注意的是，这些都不适用于 IE7。您的 :before 示例在 WebKit 浏览器中不起作用。可以修复：jsfiddle.net/thirtydot/Sm8tK/1（想法来自here）