Question

我有一个未排序的列表。我希望每个列表项在一行中显示一个或多个图标，以及一些纯文本。我已经尝试了下面的HTML（使用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>

有人能告诉我哪里出错了吗？

Answer 1

好的，我刚刚在评论中做了我说过的事。 :-)图标本身由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，只需给它们一个“缩放：1”和“内联”样式，这应该让它们起作用（我想;你可能不得不摆弄它））。

使用jquery UI的图标样式列表

1 个答案: