如何增加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元素而不是{{1} }}

span

看到对这个小提琴的影响：http://jsfiddle.net/Abp8y/11/ [更新]。

上次诊断： white-space: nowrap; // will force it not to wrap around 在li标签中发现错误。删除text-transform可以解决问题。

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

Answer 2

使用可以尝试这个并修复span的宽度 -

span{
  word-wrap:break-word;
}