无序列表不会居中对齐 [英] 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屋！