html - 段落旁边的无序列表，在同一级别，没有重叠

Question

我试图在用作副标题的段落旁边创建一个无序列表，但是该列表被压缩成一个元素的大小，然后元素相互堆叠。

我还希望它们在同一层上并排放置，但分别与标题元素的左侧和右侧对齐。

Here's我到目前为止所得到的。您可以看到堆叠列表并尝试将它们并排放置，但我相信有更好的方法可以做到这一点。

这就是我尝试将副标题和列表放在同一级别的方法(另请查看 jsfiddle):

.subtitle {
    ..
    margin-top: -40px;
    ..
}

谢谢。

Answer 1

你不应该只 float li。您必须内联您的 p 并将 nav float 到右侧 http://jsfiddle.net/Zz6Xs/12/

nav {
   float: right; 
}

.subtitle {
    display: inline;
    ...

nav ul {
    margin-top: 0;    
}

有适用于大多数 HTML 元素的默认填充和边距设置，它们因浏览器而异。许多人使用 CSS reset syste m 以获得跨浏览器的一致外观。参见 this example,就像您拥有的一样，但必须自己重新设置边距

比使用 float 更好的是 flex box model如果您可以使用 HTML 5。在下面的示例中，我们告诉 nav 占用所有剩余空间，而 p 仅在需要时宽度

CSS

section {
     display: box;  
     box-orient: horizontal;    
}

nav  {
      box-flex: 1;
      text-align: end;
}

HTML

<section>    
    <p class="subtitle">Subtitle </p>
    <nav><ul>
        <li class="menu">Item 1</li>
        <li class="menu">Item 2</li>
        <li class="menu">Itemmm</li>
    </ul></nav>
</section>