无序列表不会居中对齐 [英] Unordered List Won't Center Align
本文介绍了无序列表不会居中对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
h1似乎没有居中问题,但是列表(菜单栏)不会对齐,似乎略有缩进.请解释.
h1 seems to have no trouble centering, however, the list (menu bar) will not align, it seems to be indented slightly. Please explain.
我的HTML:
<h1>Welcome!</h1>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
我的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;
}
推荐答案
ul
元素上仍存在默认填充.将您的 ul
的CSS更改为此,它将起作用:
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;
}
这篇关于无序列表不会居中对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文