Question

试图弄清楚为什么div不会居中。如果我可以使这个工作，我将被设置。

body{
    margin:0;
    overflow: hidden;
}

ul{
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    margin: 0 auto;
    width:60%;
    text-align:center;  
}

ul li{
    text-transform:uppercase;
    float:left; 
}

ul li a{
    display: block;
    width: 120px;
    text-decoration:none;
    background-color:#98bf21;
    text-align:center;
    margin:0px;
    padding:10px;
    font-weight:Bold;
    color:#fff;
    font-family:Arial;
    letter-spacing: 1px;
}

ul li a:hover{
    background-color:#7A991A;
}

#container{
    width:100%;
}

<div id = "container">
    <ul>
        <li><a href = "#">Home</a></li>
        <li><a href = "#">News</a></li>
        <li><a href = "#">Contact</a></li>
        <li><a href = "#">About</a></li>
    </ul>
</div>

每当我尝试在浏览器中显示它时，它看起来像这样：

另外，如何将导航栏拉伸至100％？就像从页面的左边到右边？

Answer 1

您希望将div居中，而不指定宽度。为此，首先删除ul{width:60%;}，然后将text-align:center添加到父级，将display:inline-block添加到子级：

#container{
    text-align:center;  
}
ul{
    display:inline-block;   
}

body{
	margin:0;
	overflow: hidden;
	}
	
ul{
	list-style-type:none;
	overflow:hidden;
	padding:0px;
	margin: 0 auto;
	text-align:center;
	display:inline-block;	
}

ul li{
	text-transform:uppercase;
	float:left;	
}

ul li a{
	display: block;
	width: 120px;
	text-decoration:none;
	background-color:#98bf21;
	text-align:center;
	margin:0px;
	padding:10px;
	font-weight:Bold;
	color:#fff;
	font-family:Arial;
	letter-spacing: 1px;
}

ul li a:hover{
	background-color:#7A991A;	
}

#container{
	width:100%;
    text-align:center;		
}

<body>	
  <div id = "container">
    <ul>
	  <li><a href = "#">Home</a></li>
	  <li><a href = "#">News</a></li>
	  <li><a href = "#">Contact</a></li>
	  <li><a href = "#">About</a></li>
    </ul>
  </div>
</body>

Answer 2

1，删除保证金：0自动;宽度：60％;从ul并添加display：table; margin：0 auto;像这样：

ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    /* margin: 0 auto;
    width:60%; */
    display: table;
    margin: 0 auto;
}

2，删除边距：0自动;宽度：60％;来自ul并在＃容器中添加'text-align：center'，在ul中显示'display：inline-block'，如下所示：

#container{
    width:100%;
    text-align: center;
}

ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    display: inline-block;
}

3，

#container{
    width:100%;
    position: relative;
}
ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

4，

 #container{
    width:100%;
    display: flex;
    justify-content: center;
} 
ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
}

5，

#container{
    width:100%;
    display: flex;
}
ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    margin: 0 auto;
}

可以帮到你。为你选择最好的项目。

Answer 3

这是一种方法。

将display: table设置为ul元素，这将为您提供缩小到适合的块级元素，然后使用margin: 0 auto居中。

在display: table-cell元素上设置li。

这种方法的优点是，无论页面宽度有多小，链接都将保留在一条线上，这可能是某些设计所需的效果。

您可以将ul的with设置为100％，但是您的链接元素的宽度会增加，这可能不是您想要的。

ul {
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    margin: 0 auto;
    width: auto;
    display: table;
}
ul li {
    text-transform:uppercase;
    display: table-cell;
}
ul li a {
    display: block;
    width: 120px;
    text-decoration:none;
    background-color:#98bf21;
    text-align:center;
    margin:0px;
    padding:10px;
    font-weight:Bold;
    color:#fff;
    font-family:Arial;
    letter-spacing: 1px;
}
ul li a:hover {
    background-color:#7A991A;
}
#container {
    width:100%;
}

<div id="container">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

Answer 4

这是你在找什么？

我所做的只是将背景颜色移动到#container，移除了60％的宽度，并使LI元素显示：inline-block

ul li{
    text-transform:uppercase;
    display: inline-block;
}

https://jsfiddle.net/391sz22s/1/

Div容器不会使用CSS＆amp; HTML

4 个答案: