0

我觉得好像我已经尝试了从text-align center相对margin:0 auto位置和宽度为 100% 的所有东西，但是它们没有用，我试图将我的 UL 放在 div 内...

这是我的代码

<style type="text/css">

.header {
  height: 40px;
  background: #000;
  width: 100%;
}

.header ul {
  list-style-type: none;
}

.header li {
  float: left;
  line-height: 40px;
}

.header li a {
  color: #FFF;
  padding: 0 18px;
  height: 40px;
}

</style>

<div class="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Rates</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
4

2 回答 2

11

这无需定义设置宽度即可工作。

ul {
    display: table;
    margin: 0 auto;
}

如果您想摆脱左侧填充，从而真正使列表居中，请添加：

padding-left: 0;
于 2014-06-25T15:19:57.943 回答
4

这应该会为您解决。

ul {
    display: inline-block;
    margin: 0 auto;
}

如果这对你不起作用，那么给 UL 一个设定的宽度，即

ul {
    width: 300px;
    margin: 0 auto;
}
于 2013-02-18T19:35:56.563 回答