从导航栏末尾删除空格答案

【问题标题】：Removing whitespace from end of navbar从导航栏末尾删除空格
【发布时间】：2015-01-21 23:33:09
【问题描述】：

我有一个带有四个链接的导航栏。我想删除“项目”左侧和“联系人”右侧的多余空间。它似乎是无序列表的一部分，而不是填充或边距。

 <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;
}

【问题讨论】：

标签： css navbar nav

【解决方案1】：

它是块元素，所以默认宽度是100%，设置为display: inline-block;就可以了。

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

【讨论】：

不客气！您可以使用边距和填充进一步微调它。
是的，为了解决这个问题，我不得不删除我设置的负边距，但现在看起来不错！
是的，通常最好从显示、位置等主要内容开始...然后调整边距、边框、填充等。

【解决方案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;
}

【讨论】：