只是想弄清楚为什么这个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％？就像从页面的左边到右边？
解决方法
您希望将div放在没有指定宽度的中心.为此,首先删除ul {width：60％;},然后将text-align：center添加到Parent并显示：inline-block to Child：
#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>
