css - 如何增加 li 内 span 标签的宽度

Question

我有一个具有以下结构的 ul

<ul>
    <li> text goes here <span></span> </li>
    <li> text goes here <span></span> </li>
</ul>

现在最初 span 标签是空的。我正在尝试使用 jQuery .html() 函数将数字添加到 span 标记中，效果很好，但是在 Chrome 中文本被截断了。奇怪的是，当我使用网络检查器并单击 li 时，span 标签的宽度会根据内容和 li 增加。

有什么想法吗？

css如下

li{
    list-style:none;
    float:left;
    padding: 0 5px;
}

span{
    display:inline-block;
    min-width:5px;
    min-height:5px;
}

Answer 1

你不能。 span 是一个 inline 元素，可以将它的显示属性设置为 inline-block 或 block 来设置它的尺寸，或使用 block 元素代替 span。

white-space: nowrap; // will force it not to wrap around

查看此 fiddle 的效果:http://jsfiddle.net/Abp8y/11/ [更新]。

上次诊断 text-transform li 标签中的错误。删除 text-transform 解决了这个问题。

此处还讨论了 Chrome 错误:text-transform: uppercase causes layout error on Chrome正如@Christoph 发布的