Question

我的网站上有一个导航栏，目前是一种颜色，我想将其左侧（导航链接所在的位置）设为一种颜色，然后是正确的位，与背景颜色相同

为了做到这一点，我是否需要将它分成两个div？

目前我的页脚分为两部分，我设置如下：

<div id="footer">
<div id="footer_left">
<div id="footer_right">
</div>
</div>
</div>

我正在考虑像上面的例子那样制作我的导航栏，但是在我的页脚中，div“页脚”在我的css文件中保存信息。如果我有一个名为“nav”的导航器的div，那么在我的CSS文件中就没有它的信息，这可能是愚蠢的。（我不知道。）

目前我的html文件中设置了这样的标题：

<div id='nav'>
<ul id='navleft'>
</ul>
<div id='navright'>
</div>
</div>

就像我说的那样，div'nav'实际上不包含任何信息，所以这可能是错误的。另外，我应该将我的ul'navleft'放入'navleft'div中，并将有关样式的信息放入导航栏中吗？或者我应该将这些信息放在导航中并使用navright覆盖右侧不需要的内容？

我的问题可能看起来很愚蠢，甚至可能令人困惑，但我真的很困惑。我有一本CSS参考书，但对这个具体问题没有任何帮助。

Answer 1

你走在正确的轨道上。您需要浮动两个内部div，以便它们显示在同一行中。请务必具体说明每个div的宽度，以防止以后出现问题。

Answer 2

为此你需要使用float属性，如下所示：

HTML：

<div class="nav">
    <div class="left">
        content
    </div>
    <div class="right">
        content
    </div>
    <div class="clear"></div>
</div>

CSS：

div.nav
{
    width: 900px;
}

div.left,
div.right
{
    display: block;
    float: left;
}

div.left
{
    width: 600px;
}

div.right
{
    width: 300px;
}

div.clear
{
    clear: both;
}

请注意，您需要在具有浮动元素的容器末尾添加具有清除属性的元素。此外，您可以明显调整宽度值以满足您的要求。

导航栏中div的顺序有两个部分

2 个答案: