使项目浮动到导航栏的每一侧

Question

<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; 
                    }

我的问题是我试图让其中包含我的名字的 link 浮动到左侧，而项目编号浮动到右侧。但他们只是没有合并成一条线。

Answer 1

首先，让我们了解一下问题。

您目前有以下两个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 页面上的一行而言，它们占据了完整的 space。因此，您必须做的第一个更改是删除 "blockness"。因此，您可以将它们定义为 inline-block.

其次，您将它们定义为 960px 宽度。这将使他们占用上述数量的 space 而不管是否需要。通过定义 display:inline-block，它们将仅占用所需的 space 数量。因此，您不需要显式设置它们的宽度属性。

现在，解决方案

修改你的两个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>

使项目浮动到导航栏的每一侧

Make Items Float to Each Side in a Navigation Bar

html

css

navigation