links Padding auf Anker Tag

Question

Ich habe eine Jfiddle unten mit einem Beispiel meiner Links in einem Inline-Block angezeigt, was ich nicht verstehe, warum gibt es eine Art Padding oder Rand am Anfang jedes Anchor-Tags Vielleicht könnte mir jemand helfen, ich bin mir nicht sicher, ob ich etwas verpasst habe, aber ich kann einfach nicht herausfinden, warum diese Polsterung da ist?

Dies ist der HTML-Code:

<div class="wrapper"> 
    <header class="main-header"> 
      <h1>blah blah blah</h1> 
      <nav class="main-nav"> 
       <ul class="main-nav-links"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About Us</a></li> 
        <li><a href="#">Get a Quote</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </header> 

Dies ist der alle CSS-Code:

.wrapper { 
    width: 100%; 
    min-width: 960px; 
} 

.main-header { 
    position: relative; 
    width: 100%;  
    height: 60px; 
    background-color: #41a2cd; 
} 

.main-header > h1{ 
    float: left; 
    margin: 11px 0 0 5px; 
    color: #073a4f; 
} 

.main-nav-links > li { 
    list-style: none; 
    display: inline-block; 
} 

.main-nav-links li > a { 
    text-decoration: none; 
    display: block; 
    color: #073a4f; 
} 

.main-nav-links > li { 
    border-right: 1px solid #45b1e1; 
} 

.main-nav-links li > a:hover { 
    background-color: #ffffff; 
    /*background-color: #50bae8;*/ 
} 

http://jsfiddle.net/pDvZt/

Answer 1

Wenn Sie display: inline-block; verwenden es 4px Abstand zwischen den Elementen lassen, so Sie müssen margin-left: -4px; verwenden oder stattdessen float verwenden.

Demo (mit margin-left: -4px;)

.main-nav-links > li { 
    list-style: none; 
    display: inline-block; 
    margin-left: -4px; 
} 

Demo 2 (Mit float Eigenschaft)

.main-nav-links > li { 
    list-style: none; 
    float: left; 
} 

Hinweis: Vergessen Sie nicht, Ihre Schwimmelemente zu löschen, wenn Sie float: left; für li Eigenschaft verwenden.

---

Edit: Ich möchte, dass inorder geben, dieses Verhalten zu verhindern, dass Sie auch Ihre Markup ändern können (wenn Sie Zugriff darauf haben), als Sie li Elemente Ihre aufreihen kann, so dass Leerraum zwischen die Elemente werden nicht mehr da sein, zum Beispiel

<ul> 
    <li></li><li></li><li></li><li></li> 
</ul> 

Answer 2

eine Lösung ist

<li></li><li></li> 

in einer Zeile zu setzen. Dies liegt daran, dass die neuen Zeilen als Leerzeichen formatiert sind.

Answer 3

<li></li><li></li> 

Es ist die beste Lösung, die Sie