Question

我有以下列表：

<ul id="inline">
<li><a href="#">One</a>
   <ul>
   <li><a href="#">Inline1</a></li>
   <li><a href="#">Inline2</a></li>
   </ul>
</li>
<li><a href="#">Two</a>
   <ul>
   <li><a href="#">Inline1</a></li>
   <li><a href="#">Inline2</a></li>
   </ul>
</li>
</ul>

我要展示的是第一级li作为新行和嵌套列表与其父级显示在同一高度但是内联。像这样：

One Inline1 Inline2
Two Inline1 Inline2

这就是我现在所拥有的：

#inline {
  width: 100%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#inline + ul > ul {
  display:inline;
}

但我必须对css有基本的了解才能弄清楚出了什么问题。

Answer 1

您需要将ul（#inline的孩子）和这些li的孩子ul设置为display:inline;。 CSS 将是：

<强> DEMO

#inline ul, #inline ul li {
    display:inline;
    padding:0;
}

Answer 2

我有一个简单的解决方法。让我们看看小提琴。

OLD：http://jsfiddle.net/kiranvarthi/sfho4xn8/ 更新了小提琴：http://jsfiddle.net/kiranvarthi/sfho4xn8/2/

#inline {
  width: 100%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#inline ul li {
  display:inline;
}

Answer 3

使用此CSS使其正常工作

#inline {
  width: 100%;
  list-style-type: none;
  padding:0;
  margin:0;
}

#inline ul {
  display:inline-block;
  list-style:none;
  margin-left:-30px;
}

#inline ul li {
  display:inline-block;
  list-style:none;
  text-decoration:none;
  margin-left:0px;
}

使嵌套列表显示为内联

3 个答案: