Question

如果我有这样一个列表：

<ul>
  <li>
    item name
    <ul>
      <li>
        item name
      </li>
      <li>
        item name
        <ul>
          <li>
            item name
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

例如，我希望每个“li”像所有一个句子一样显示内联...我需要这个用于面包屑......

我试过了：

ul li {
  display: inline;
  float: left;
}

但是这不会起作用，因为“ul”或“li”没有定义的宽度，所以它会在下面。

欢迎任何帮助，谢谢！

Answer 1

这个有效：

ul{display:inline;} ul li{display:inline;} ul li ul li{display:inline;}

jsfiddle：http://jsfiddle.net/naveed_ahmad/QWshN/

Answer 2

只需在<li>元素中包含文本就可以使文本的行为类似于块级元素（有效地将每组文本包装在<p>标记中）。例如，如果您将文字包装在<span>中，并同时制作范围inline，you will get the desired result

另外，使用ul, li, span作为选择器而不是ul li

编辑：

事实上，如果您只是将原始CSS更改为：

ul, li {display: inline}

它会完美运作。

Answer 3

如果您只想对嵌套的UL进行样式设置，请使用ul ul li作为选择器。您可能也不需要float: left。

Answer 4

我认为这更性感：

ul, li {
    display: inline-block
}

http://jsfiddle.net/jzVcE/

Answer 5

您只希望外部ul成为块级元素，因此要使所有其他元素成为内联元素，您可以使用：

/*  both the inner ul's and the li's */
ul ul,
li
{
  display:inline;
}

或者，如果你想要漂浮它们：

ul
{
  overflow: hidden;    /* make sure the uls wraps around their contents, mainly for outer ´ul´ */
}
ul ul,
li
{
  float: left;
}

显示与css内联的所有子级列表

5 个答案: