Question

我有一个这样的无序列表：

<ul>
 <li>Parent-1
  <ul>
    <li>Child-1</li>
    <li>Child-2</li>
    <li>Child-3</li>
  </ul>
 </li>
 <li>Parent-2
  <ul>
    <li>Child-4</li>
    <li>Child-5</li>
  </ul>
 </li>
 <li>Parent-3
  <ul>
    <li>Child-6</li>
  </ul>
 </li>
</ul>

结果需要像这样显示内联：

Parent-1 |儿童1 |儿童2 |孩子3 | Parent-2 |孩子4 |孩子-5 | Parent-3 |小孩子6

你如何在CSS中或者在jquery的帮助下实现这一点？看似简单的事情，但我无法弄清楚。

Answer 1

所以这不是你想要的，但它应该让你开始。将以下css应用于您的li / ul：

ul, li {
    list-style-type: none;
    display: inline-block;
}

如果您想查看此工作，请在此处查看：http://jsfiddle.net/Cvf33/

Answer 2

使用display: inline-block;属性和值非常容易。 inline-block属性告诉元素表现得像一个段落，在一行上从左到右排列，直到没有更多宽度可用。此时，它会断行到第二行。

通过告知UL元素为inline-block来实现该效果，其使所有UL彼此相邻。然后通过将相同的inline-block应用于LI元素，在UL内部对齐从左到右的元素。您可以通过在下面的两个选择器中注释出display: inline-block;行来查看不同的结果。

内联块是IE8和前向兼容。有关兼容性的详细信息，请参阅此Can I Use It链接。

请注意，额外的CSS（高度和背景）仅用于可视化演示，并不是代码功能的组成部分

Demo JSFiddle

ul {
    display: inline-block;
    height: 40px;
}

ul li { 
    display: inline-block;
    height: 40px;
    background: red;
}

ul li ul.sub-menu li {
    background: blue;
}

Answer 3

试试这个：

<style>
ul, li {display: inline-block;}
ul, li {margin:0; padding: 0; text-align: left;}
li + li::before {
    content: " | ";
}
ul::before {
    content: " | ";
}
.container::before {
    content: " ";
}
ul li {font-weight: bold;}
ul li ul li {font-weight: normal;}
</style>

<ul class="container">
 <li>Parent-1
  <ul>
    <li>Child-1</li>
    <li>Child-2</li>
    <li>Child-3</li>
  </ul>
 </li>
 <li>Parent-2
  <ul>
    <li>Child-4</li>
    <li>Child-5</li>
  </ul>
 </li>
 <li>Parent-3
  <ul>
    <li>Child-6</li>
  </ul>
 </li>
</ul>

请注意，我给了最外面的一个类名＆＃34;容器＆＃34;为了删除前导＆＃34; |＆＃34;

需要在其父项的右侧显示子菜单

3 个答案: