从导航栏末尾删除空格

Question

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

 <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

为您的 .navbar ul 设置一个 width 属性，并使其保持居中，将您的水平 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;
}

Answer 2

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

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

从导航栏末尾删除空格

Removing whitespace from end of navbar

css

nav

navbar