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;
}

score 2 · Accepted Answer

你不能。span是一个inline元素，要么将其显示属性设置为inline-block或block设置其尺寸，要么使用block元素而不是span.

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

查看此小提琴的效果：http: //jsfiddle.net/Abp8y/11/ [更新]。

最后的诊断： text-transform在 li 标签中发现了错误。删除text-transform可以解决问题。

score 0 · Accepted Answer

0

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

span{
  word-wrap:break-word;
}

于 2012-07-04T06:46:14.423 回答

2 回答 2