Exclude one item from margin setting - navigation bar

Question

I'm trying to exclude the margin setting for one item. The last one, "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

Thanks for your time, you can check out the code at htttp://hjortefjellet.com

What is the problem? You have margins on your anchors, not on your list elements. — dsgriffin, Mar 15 '14 at 19:07
This is not the relevant part of your CSS. Look into the styling of the `a` element themselves. Also read about [the clearfix hack](http://stackoverflow.com/questions/8554043/what-is-clearfix) to understand why styling the `li` has no effect. — Boaz, Mar 15 '14 at 19:11

nodefault · Accepted Answer · 2014-03-15T19:20:10.340

1

Your margin right is placed on a link right here

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
  }

So all you need to do is:

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

You can also do that with css:

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

edited Mar 15 '14 at 19:20

answered Mar 15 '14 at 19:11

nodefault

372
3
7

ok i edited the css and if that doesn't work try the inline styles in the ul placed on the a element! – nodefault Mar 15 '14 at 19:22
A combination of this, making the width smaller and margin bigger solved the problem. Thank you. – user3394828 Mar 15 '14 at 20:39

score 0 · Answer 2 · answered Mar 15 '14 at 19:20

Part of the problem is that each list item has a specific width value. Even if you apply a 0 margin to the right of the last item, you still have spacing. I think you'll need to account for that and refactor your widths a bit. You can start by adding this change:

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

Kheema Pandey · Answer 3 · 2014-03-15T20:02:36.233

If you need to select the last element I am assuming there will be nested ul. you can use many CSS3 selectors here but In your case to select the last element I used :nth-last-child(1).

You have to add this 2 line of code only. 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;}

here is a Working Demo. http://jsbin.com/zacevosa/4/

Exclude one item from margin setting - navigation bar

3 Answers3