html - 使嵌套列表显示为内联

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 的子级)和这些ul 的子级li code> 到 display:inline;。 CSS 将是:

DEMO

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