Question

我有一个带有四个链接的导航栏。我想删除“Projects”左侧的额外空格和“Contact”的右侧。它似乎是无序列表的一部分，而不是填充或边距。

 <nav class="navbar">
  <div class="container">
    <ul class="navbar-list">
      <li><a href="#projects">Projects</a></li>
      <li><a href="#schedule">Schedule</a></li>
      <li><a href="#FAQ">FAQ</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

.navbar {
/*position: fixed;*/
top: 0;
left: 0;
z-index: 9999;
padding: 0;
text-align: center;
}

.navbar ul {
    list-style: none;
    background-color: #fff;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-left: -4px;
    margin-right: -4px;
}

.navbar li {
    position: relative;
    display: inline;
    margin-bottom: 0;
    margin-left: -20px;
}

.navbar li:hover {
    color: #000033;
}

.navbar a {
    display: inline-block;
    padding-right: 25px;
    padding-left: 25px;
    text-decoration: none;
    line-height: 6.5rem;
    color: #222;
    font-size: 1.6rem;
    font-weight: 600;
}

.navbar a:hover {
    color: #006699;
    background-color: #000033;
}

Answer 1

它是一个块元素，所以它默认宽度为100％，设置为display: inline-block;，它应该没问题。

http://jsfiddle.net/95g12kpe/1/

Answer 2

为width设置.navbar ul属性，并将其保持居中，将水平margin属性设置为auto，例如：

.navbar ul {
    list-style: none;
    background-color: #fff;
    border-bottom: 2px solid #000000;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 500px;
}

从导航栏末尾删除空格

2 个答案: