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

我的问题是我正在尝试将其名称中的链接浮动到左侧，而项目编号浮动到右侧。但他们只是没有合并成一条线。

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页面上的一行中占据了整个空间。因此，您必须做的第一个更改是删除＆＃34; blockness＆＃34;。因此，您可以将它们定义为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;
}

这将为您提供所需的信息。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: