问题
h1 seems to have no trouble centering, however, the list (menu bar) will not align, it seems to be indented slightly. Please explain.
My HTML:
<h1>Welcome!</h1>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
My CSS:
h1{
text-align: center;
}
ul{
position:relative;
display: inline-block;
list-style: none;
width:100%;
text-align: center;
margin: auto;
}
li{
list-style: none;
text-align: center;
margin: 15px;
display: inline-block;
}
回答1:
There's still default padding on the ul
element.
Change the CSS of your ul
to this and it'll work:
ul{
position:relative;
display: inline-block;
list-style: none;
width:100%;
text-align: center;
margin: auto;
padding: 0;
}
来源:https://stackoverflow.com/questions/27025008/unordered-list-wont-center-align