Question

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

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

Here's到目前为止我得到了什么。您可以看到堆叠列表以及尝试将它们并排放置，但我确信有更好的方法可以实现此目的。

这就是我试图将字幕和列表放在同一级别上（也看看jsfiddle）：

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

感谢。

Answer 1

你不应只是浮动li。您必须内嵌p并将nav浮动到右侧http://jsfiddle.net/Zz6Xs/12/

nav {
   float: right; 
}

.subtitle {
    display: inline;
    ...

nav ul {
    margin-top: 0;    
}

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

如果你可以使用HTML 5，那么使用浮点数比flex box model更好。在下面的例子中，我们告诉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%;
}

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

2 个答案: