Html “试图居中”；导航栏“；，但宽度自动设置为100%_Html_Css

Html “试图居中”；导航栏“；，但宽度自动设置为100%

html css

Html “试图居中”；导航栏“；，但宽度自动设置为100%,html,css,Html,Css,我试图将导航栏居中放置在页面顶部，但导航栏的宽度已自动设置为100% 以下是我的HTML代码： <body> <div class="container"> <div class="navBar"> <li><a href="#">List Item #1</a></li> <li><a href="#">List I

我试图将导航栏居中放置在页面顶部，但导航栏的宽度已自动设置为100%

以下是我的HTML代码：

<body>
    <div class="container">
        <div class="navBar">
            <li><a href="#">List Item #1</a></li>
            <li><a href="#">List Item #2</a></li>
            <li><a href="#">List Item #3</a></li>
            <li><a href="#">List Item #4</a></li>
            <li><a href="#">List Item #5</a></li>
        </div>
    </div>
</body>

是否有其他方法可以使“navBar”div在主体的中心对齐？

我怀疑当前。navBar是display:block，这意味着它将填充其容器的100%

尝试将.navBar设置为display:inline block或float:left

首先，HTML无效

li

必须是

ul

ul

和

div

是块级元素，因此自动宽度为100%，因此必须进行收缩包装

一种方法是使用

显示：内联块

然后父元素上的

text align:center

将使内容居中。由于您已经在

navBar

元素上设置了高度，因此我假设您希望在

li

上设置相同的高度

.container{
宽度：75%；
高度：自动；
保证金：0自动；
文本对齐：居中；
}
navBar先生{
显示：内联块；
高度：35px；
}
李国宝先生{
显示：内联块；
列表样式类型：无；
}

使用边距：在具有宽度的对象上自动将其居中

给你：

.container{
宽度：75%；
高度：自动；
保证金：0自动；
背景色：红色；
}
navBar先生{
宽度：80%；
保证金：0自动；
背景色：白色；
}
李{
宽度：18%；
保证金：自动；
显示：块；
浮动：左；
文本对齐：居中；
}

正确的标记

.navBar

必须是

ul

而不是

div

，作为

li

的父项才能成为有效标记：）

问题

div

和

ul

元素的默认显示为

display:block

。具有

display:block

的元素将是其父元素宽度的100%，从而使

margin:auto

无效。您可以将元素的宽度设置为允许居中，但如果/当内容更改时，该宽度将中断

修理一个简单的解决方法是使用

display:table

，因为这将允许您使用

margin:auto

来居中元素，而无需指定宽度，从而使代码更加健壮

注意：确保从

ul

中删除默认填充，否则它将无法正确居中

示例如下：

.container{
宽度：75%；
保证金：自动；
}
navBar先生{
高度：35px；
保证金：0自动；
显示：表格；
填充：0；
}
李国宝先生{
显示：内联块；
填充：0 10px；
列表样式：无；
}

.container{
    width:75%;
    height:auto;
    margin:0 auto;
}
.navBar{
    width:auto;
    height:35px;
    margin:0 auto;
}