带有使用jQuery UI的图标的样式列表

我有一个未排序的列表。我希望每个列表项能够在一行中显示一个或多个图标，以及一些纯文本。我已经尝试了下面的HTML（使用jQuery UI），但图标是一个在另一个下面显示的，而不是连续的。带有使用jQuery UI的图标的样式列表

<ul class="ui-widget"> 
    <li class="ui-corner-all ui-state-default"> 
    <span class="ui-icon ui-icon-comment"></span> 
    <span class="ui-icon ui-icon-suitcase"></span> 
    <span>Mr Kevin</span> 
    <span class="ui-icon ui-icon-contact"></span> 
    </li> 
</ul>

有人可以告诉我我要去哪里吗？

来源

2011-11-25 Kevin

使用Firebug找出“ui-corner-all”规则的哪一部分以您看到它的方式进行布局。它应该需要10秒钟才能完成;只需逐个禁用规则，直到内容看起来像内联内容。（当然，首先扫描一下“white-space：pre”规则。） – Pointy

好的，我只是做了我说的在我的评论中做的事情。 :-)图标本身被jQuery UI CSS设计为“display：block”。

您可以将类添加到您的<li>：

<li class="ui-corner-all ui-state-default my-list-item">

那么自己的CSS规则：

li.my-list-item .ui-icon { display: inline-block; }

对于不支持 “inline-block的” 前辈的IE版本，只要给他们一个“zoom：1”和“inline”风格，这应该会使他们工作（我认为，你可能不得不摆弄它）。

来源

2011-11-25 22:43:26 Pointy

带有使用jQuery UI的图标的样式列表

回答

相关问题