Question

我已经四处搜索并发现了很多关于这个问题的问题，但我尝试过的答案似乎都不适用于我的情况。所以我在nav标签内部有一个无序列表，我希望列表相对于父导航标签居中。但是无论我尝试什么，列表总是有点向右，从不在中心。

HTML很直接：

<nav>
<ul>
    <li>MENU</li>
    <li><a href="">Opt 1</a></li>
    <li><a href="">Opt 2</a></li>
    <li><a href="">Opt 3</a></li>
</ul>
</nav>

到目前为止这是CSS：

nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}

任何想法我怎样才能让它发挥作用？

Answer 1

试试这个

nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}

Answer 2

这是因为ul默认情况下浏览器应用了padding和margin，您需要删除它们

＆＃13;

nav {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  background: gray;
  text-align: center;
}
nav ul {
  list-style-type: none;
  color: blue;
  margin: 0;
  padding: 0;
}

＆＃13;

<nav>
  <ul>
    <li>MENU</li>
    <li><a href="">Opt 1</a>
    </li>
    <li><a href="">Opt 2</a>
    </li>
    <li><a href="">Opt 3</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 3

测试一下：

 <nav>
       <ul>
            <li>MENU</li>
            <li><a href="">Opt 1</a></li>
            <li><a href="">Opt 2</a></li>
            <li><a href="">Opt 3</a></li>
      </ul>
 </nav>

nav { 
   display:table;
   margin:0 auto;
   padding : 10px; 
}

CSS无序列表对齐

3 个答案: