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

Question

我正在尝试在用作副标题的段落旁边创建一个无序列表，但是该列表被压缩成一个项目的大小，然后项目彼此堆叠。

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

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

这就是我尝试将字幕和列表放在同一级别上的内容（另请查看 jsfiddle）：

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

谢谢。

Answer 1

你不应该只浮动li. 您必须内联并向右p浮动http://jsfiddle.net/Zz6Xs/12/nav

nav {
   float: right; 
}

.subtitle {
    display: inline;
    ...

nav ul {
    margin-top: 0;    
}

大多数 HTML 元素都有默认的填充和边距设置，它们因浏览器而异。许多人使用CSS 重置系统来获得跨浏览器的一致外观。请参阅此示例，就像您所拥有的一样，但必须自己重置边距

如果可以使用 HTML 5，则比使用浮点数更好的是flex box 模型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>

Answer 2

还可以尝试删除负边距并将元素上的填充和边距归零。

header {
    width: 50% ;
    margin:0 auto;
}

h1 {
    font-size: 50px;
    color: #33B5E5;
}

h1,p,nav,ul{
        padding:0;
    margin:0;
}

.subtitle {
    color: #33B5E5;
    float:left;
    width:20px
}
ul{
    float:right;
}

.menu {
    display: inline;
    width: 20%;
}