使用 CSS 将列表居中答案

【问题标题】：Centering a list using CSS使用 CSS 将列表居中
【发布时间】：2016-12-09 19:25:11
【问题描述】：

我无法将导航栏居中，我可以看到问题，但我无法真正找到解决方法。抱歉，我对 CSS 有点陌生。

Header bar with inspect element

如您所见，列表前面有一个额外的块。我已经四处寻找修复方法，但如果不使用我想避免的绝对定位，我似乎无法让它适合。

这是一个 jsfiddle 页面，可以准确地向您展示我的意思 - https://jsfiddle.net/h4ay0voj/2/

HTML 代码：

<header>
    <h1>Header</h1>
    <ul class="menu">
        <a class="active" href="">
            <li class="selected">Link1</li>
        </a>
        <a href="">
            <li>Link2</li>
        </a>
        <a href="">
            <li>Link3</li>
        </a>
        <a href="">
            <li>Link4</li>
        </a>
        <a href="">
            <li>Link5</li>
        </a>
    </ul>
</header>

CSS 代码：

header{
  width:80%;
  overflow: hidden;
  color:#ffffff;
  margin-bottom:1%;
  background: #292E37;
}

header a:link {text-decoration:none;color:#ffffff;}
header a:visited{color:#ffffff;}
header a:hover{color:#292E37;}
header a.active{color:#4db8ff;font-weight:bold;cursor:default}
header h1{text-align: center;}

ul.menu{
  width:40%;
  text-align:center;
  text-decoration:none;
  color: #000000;
  margin-left: auto;
  margin-right: auto;
}

ul.menu li{
  display: inline;
  padding: 1%;
  transition: background 0.2s;
  padding-bottom:2.25%;
}

ul.menu li:hover{
  background:#a7afbe;
  transition: 0.3s ease;
  border-bottom: 3px solid #4db8ff;
}

任何帮助将不胜感激:) 提前致谢！

【问题讨论】：

我真的不明白你的问题吗？您想将导航栏居中吗？
尝试将padding: 0添加到ul.menu

标签： html css html-lists centering

【解决方案1】：

不确定其他浏览器，但是对于Chrome，你可以看到-webkit-padding-start: 40px;正在被应用。

您可以像这样将元素上的填充设置为 0：

https://jsfiddle.net/byj0ye8g/

或者，解决此类问题的最佳方法是使用 CSS 重置，如下所示：http://meyerweb.com/eric/tools/css/reset/

另外，将锚标签放在列表项标签内，而不是在它们周围。

【讨论】：

【解决方案2】：

您用于导航栏的宽度太小，导致导航栏“起皱”。我已将 UL 类菜单的宽度增加到 60%。我更新了 JSFiddle 页面，所以你可以看看它是否正确。

正确的代码如下：

ul.menu{
  width:60%;
  text-align:center;
  text-decoration:none;
  color: #000000;
  margin-left: auto;
  margin-right: auto;
}

【讨论】：