0

我试图想出一个简单的 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>

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

4

2 回答 2

1 
#header ul { float: left; }

或者

#header ul { position: absolute; right: 0; }
于 2013-02-14T20:57:25.453 回答
0

在标题中，您需要浮动h1左侧和ul右侧，然后添加display: inline到您的链接（以使它们保持在同一行）。

要定位标题中的列表项，您可以简单地使用父选择器，如下所示#header li：

这是您需要的：

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

见演示。

于 2013-02-14T20:52:13.840 回答