从边距设置中排除一项 - 导航栏答案

【问题标题】：Exclude one item from margin setting - navigation bar从边距设置中排除一项 - 导航栏
【发布时间】：2014-04-21 02:52:18
【问题描述】：

我正在尝试排除一项的边距设置。最后一个，“Kontakt”

HTML

<nav>
    <ul>
        <li><a href="index.html">HJEM</a></li>
        <li><a href="forum">FORUM</a></li>
        <li><a href="doner.html">DONER</a></li>
        <li><a href="servere.html">SERVERE</a>
        <li><a href="faq.html">FAQ</a></li>
        <li style="margin-right: 0 !important;"><a href="kontakt.html">KONTAKT</a></li>
    </ul>
</nav>

CSS

nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 106px;
    margin: 0px 10px 0 0;
}
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li ul.submenu {
    position: absolute;
    width: auto;
    display:none;
    top: 35px;
}
nav ul > li:hover > ul {
    left: 0;
    display: block;
}

Center navigation bar

感谢您的宝贵时间，您可以在 http://hjortefjellet.com 查看代码

【问题讨论】：

有什么问题？您的锚点有边距，而不是列表元素。
这不是 CSS 的相关部分。查看a 元素本身的样式。另请阅读 the clearfix hack 以了解为什么设置 li 的样式无效。

标签： jquery html css

【解决方案1】：

您的边距权利被放置在此处的链接上

nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 106px;
    margin: 0px 10px 0 0;<- margin right
  }

所以你需要做的就是：

<ul>
        <li><a href="index.html">HJEM</a></li>
        <li><a href="forum">FORUM</a></li>
        <li><a href="doner.html">DONER</a></li>
        <li><a href="servere.html">SERVERE</a>
      <li><a href="faq.html">FAQ</a></li>
          <li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a></li>
  </ul>

你也可以用 css 做到这一点：

nav ul li:last-child a{
margin-right:0;
}

【讨论】：

好的，我编辑了 css，如果这不起作用，请尝试在 a 元素上放置 ul 中的内联样式！
结合这个，让宽度变小，边距变大解决了这个问题。谢谢。

【解决方案2】：

部分问题在于每个列表项都有一个特定的宽度值。即使您在最后一项的右侧应用 0 边距，您仍然有间距。我认为你需要考虑到这一点并稍微重构你的宽度。您可以从添加此更改开始：

nav ul li a {
    margin: 0px 12px 0 0;

【讨论】：

【解决方案3】：

如果您需要选择最后一个元素，我假设将嵌套ul。您可以在这里使用许多 CSS3 选择器，但在您的情况下选择我使用的最后一个元素 :nth-last-child(1)。

您只需添加这 2 行代码。 choose red color here for just better visibility

nav ul li li:last-of-type a{color:#717171;font-size:16px;} 
nav li:nth-last-child(1) a{color:red;font-size:16px;}

这是一个工作演示。 http://jsbin.com/zacevosa/4/

【讨论】：