使用 CSS 使列表居中

Question

我在将导航栏居中时遇到问题，我能看到问题，但我找不到真正的修复方法。抱歉，我是 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;
}

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

Answer 1

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

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

https://jsfiddle.net/byj0ye8g/

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

此外，将锚标记放在列表项标记内，而不是围绕它们。

Answer 2

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

正确代码如下：

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

使用 CSS 使列表居中

Centering a list using CSS

html

css

html-lists

centering