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

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

首先，让我们了解问题所在

您当前有以下两个CSS类：

这两个类应用于div元素。默认情况下，div元素是块级元素。这意味着，它们占据了html页面上一行的全部空间。因此，您必须做的第一个更改是移除阻塞。因此，可以将它们定义为内联块

其次，您已经用960px的宽度定义了它们。这将使它们占据所述数量的空间，而不管是否需要。通过定义display:inline块，它们将只占用所需的空间量。因此，不需要显式设置它们的宽度属性

现在，解决方案

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

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

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

这会给你你想要的

身体{ 溢出y：滚动； 填充：0； 保证金：0； 字体系列：Arial； 字体大小：16px； 背景色：F1F1； 高度：2000px； } 导航{ 背景色：222； 位置：固定； 宽度：100%； 排名：0； } 导航包装器{ 保证金：0px自动； 显示：内联块； 浮动：左； } 导航包装器1{ 保证金：0px自动； 文本对齐：右对齐； 显示：内联块； 浮动：对； } 导航ul{ 列表样式类型：无； 填充：0； 保证金：0； } 李国荣{ 显示：内联块； } nav ul li:悬停{ 背景色：333； } 海军李娜，到访{ 颜色：CCC； 显示：块； 填充：15px； 文字装饰：无； }

---

非常感谢。工作Perfectly@ER1N我也编辑了我的答案来解释基本概念。阅读它，下次你将能够自己解决这个问题！！再次感谢你，我重读了你在回答中写的内容，它非常有意义

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

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

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

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