如何在div标题中更改这些链接的位置

Question

我试图想出一个简单的css布局，它应该是这样的：

这是标题和导航栏的html代码：

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">Help</a>
    <li><a href="">Contact Us</a>
    <li><a href="">Customers</a> 

</div>

我已经在导航栏上做了一些样式，但是我希望能够保持标题内的两个链接对齐并且徽标图像保持对齐。 当我尝试在标题中编辑这些链接时，一切都搞砸了，因为我对如何区分导航列表项和标题列表项感到困惑。 有人可以帮我标题定位吗？

Answer 1

#header ul { float: left; }

或

#header ul { position: absolute; right: 0; }

Answer 2

在标题中，您需要向左移动h1，向右移动ul，然后将display: inline添加到您的链接（以使它们保持在同一条线上）。< / p>

要定位标题中的列表项，您只需使用父选择器，如下所示：#header li。

以下是您的需求：

#header {
    border: 1px solid #ccc;
    overflow: hidden; /* clearfix */
}
#header h1 {
    float: left;
}
#header ul {
    float: right;
}
#header li {
    display: inline;
}

请参阅DEMO。