Question

我正在尝试将我的列表与徽标右侧对齐，但它似乎位于下方的行上，但仍然在右侧。

HTML

<header>
    <nav class="container">
        <a href="index.html"><img src="#"></a>
        <ul>
            <li><a href="./post" id="recruit">Add</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    padding-top: 65px;
    padding-bottom: 65px;
}

.container {
    width: 960px;
    margin: 0 auto;
}
header nav {
    height: 50px;
    line-height: 50px;
}

header ul {
    float: right;
}
ol, ul {
    list-style: none;
}

这是float的问题吗？我应该使用某种overflow规则来纠正吗？

Answer 1

问题是，您的li已从line-height父级继承了nav ...重置它，它将是内联的：

Updated Fiddle

header ul li {
    line-height: 0px;
}

修改

另外，请记住，float会使元素浮动在之后的元素上。因此，您的ul必须放在徽标之前，以便它可以相应地浮动。

Answer 2

ul正在应用一个上边距，这会将列表向下推。

为避免这种情况，请将以下内容添加到header ul样式中：

  margin: 0 auto;

Answer 3

将线条高度更改为零并向左添加浮动http://jsfiddle.net/2h6p3vvd/4/ 试试这个

header {
padding-top: 65px;
padding-bottom: 65px;
}

.container {
width: 960px;
margin: 0 auto;
}

.container img{
position:absolute;
}
header nav {
height: 50px;
line-height: 0px;
}

 header ul {
 margin-left:0px;
float:left; 
}

ol, ul {
list-style: none;
}

Answer 4

按照以下方式编写html结构

<header>
<nav  class="container">
    <div class="logo">
        <a href="index.html"><img src="" alt="" /></a>
    </div>  
    <div class="menu">
        <ul>
            <li><a href="./post" id="recruit">Add</a></li>
        </ul>
    </div>

</nav>
</header>

并编写类似

的CSS

   .container {
      width: 960px;
     margin: 0 auto;
   }
   .logo{width: 300px;float:left;}
   .menu{float:left;}

Answer 5

最好将它们放在包含border="0px"和width=100%的表格列中，并在中间添加一列例如：

<header>
<nav class="container">
<table width=100% border=0px>
  <tr>
    <td><a href="index.html"><img src="#"></a></td>
    <td width=100%><!--This column is only needed only when you want to push image and list to extreme left and right respectively--></td>
    <td><ul>
        <li><a href="./post" id="recruit">Add</a></li>
    </ul></td>
  </tr>
</table>
</nav>
</header>

CSS列表从图像中删除一行

5 个答案: