使项目在导航栏中向两侧浮动

<body>
    <div id="nav">
        <div id="nav-wrapper">
            <ul>
                <li><a href="#">ERIN</a></li>
            </ul>
        </div>
        <div id="nav-wrapper1">
            <ul>
                <li><a href="#">item #2</a></li>
                <li><a href="#">item #3</a></li>
                <li><a href="#">item #4</a></li>
                <li><a href="#">item #5</a></li>
            </ul>
        </div>
    </div>

您在上面看到的代码构成了我的导航栏。

下面是 CSS：

body
{ 
    overflow-y: scroll; 
    padding: 0; 
    margin: 0; 
    font-family: Arial; 
    font-size: 16px; 
    background-color: #F1F1F1; 
    height: 2000px; 
}
#nav
{ 
    background-color: #222; 
    position: fixed; 
    width: 100%; 
    top: 0; 
}
    #nav-wrapper
    { 
        width: 960px; 
        margin: 0 auto; 
        text-align: left; 
    }
    #nav-wrapper1
    { 
        width: 960px; 
        margin: 0 auto; 
        text-align: right;
    }

        #nav ul
        { 
            list-style-type: none; 
            padding: 0; 
            margin: 0; 
        }
            #nav ul li
            { display: inline-block; }
                #nav ul li:hover
                { background-color: #333; }
                    #nav ul li a,visited
                    { 
                        color: #CCC; 
                        display: block; 
                        padding: 15px; 
                        text-decoration: none; 
                    }

我的问题是我试图让带有我名字的链接浮动到左侧，而项目编号浮动到右侧。但它们只是没有组合成一行。

首先，让我们了解问题。

您当前有以下两个CSS类：

#nav-wrapper
    { 
        width: 960px; 
        margin: 0 auto; 
        text-align: left; 
    }
    #nav-wrapper1
    { 
        width: 960px; 
        margin: 0 auto; 
        text-align: right;
    }

这两个类应用于div元素。默认情况下，div元素block-level元素。这意味着，它们占据了html页面上的一行的全部空间。因此，您必须进行的第一个更改是删除"块状"。因此，您可以将它们定义为 inline-block .

其次，您已经用 960px 的宽度定义了它们。这将使他们占用上述空间量，无论是否需要这样做。通过定义display:inline-block，它们将只占用所需的空间量。因此，您无需在它们上显式设置 width 属性。

现在，解决方案

只需修改您的两个 CSS 类，如下所示：

#nav-wrapper {
    margin: 0px auto;
    display: inline-block;
    float:left;
}
#nav-wrapper1 {
    margin: 0px auto;
    text-align: right;
    display: inline-block;
    float: right;
}

这将为您提供所需的内容。

body {
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    font-family: Arial;
    font-size: 16px;
    background-color: #F1F1F1;
    height: 2000px;
}
#nav {
    background-color: #222;
    position: fixed;
    width: 100%;
    top: 0;
}
#nav-wrapper {
    margin: 0px auto;
    display: inline-block;
    float:left;
}
#nav-wrapper1 {
    margin: 0px auto;
    text-align: right;
    display: inline-block;
    float: right;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav ul li {
    display: inline-block;
}
#nav ul li:hover {
    background-color: #333;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}

<body>
    <div id="nav">
        <div id="nav-wrapper">
            <ul>
                <li><a href="#">ERIN</a>
                </li>
            </ul>
        </div>
        <div id="nav-wrapper1">
            <ul>
                <li><a href="#">item #2</a>
                </li>
                <li><a href="#">item #3</a>
                </li>
                <li><a href="#">item #4</a>
                </li>
                <li><a href="#">item #5</a>
                </li>
            </ul>
        </div>
    </div>
</body>

相关内容

最新更新

热门标签：