bağlantı etiketi üzerinde sol dolgu

Question

Aşağıda bir satır içi blokta görüntülenen bağlantılarımın bir örneği ile bir jsfiddle var, ne anlamadığım her bağlantı etiketinin başında neden bir çeşit dolgu veya kenar boşluğu var Belki birisi bana yardımcı olabilir, ben bir şey özledim emin değilim ama bu dolgu neden orada olduğunu öğrenmek için görünmüyor olabilir?

Bu

html kodudur:

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

Bu, tüm css kodunuz: display: inline-block; kullandığınızda

.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

o kadar, elemanları arasında 4px boşluk bırakacak margin-left: -4px;'u kullanmanız veya bunun yerine float kullanmayı düşünmeniz gerekir.

Demo

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

Demo 2 (float özelliğini kullanarak)

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

Not (margin-left: -4px; kullanma alanı): li özelliği için float: left; kullanıyorsanız, yüzer elemanları temizlemek için unutmayın.

---

Düzenleme: Bunu böylece li unsurları hizaya edebileceğinden çok (dosyaya erişimi ettik varsa) ayrıca İşaretlemenizi değiştirebilir bu davranışı önlemek için inorder belirtmek istiyoruz arasındaki boşluk elementler, örneğin, artık olmayacak

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

Answer 2

bir çözelti bir hat

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

koymaktır. Bu aslında yeni satırların boşluklar olarak biçimlendirilmesidir.

Answer 3

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

Onun