1. 首頁
  2. 問答
  3. 如何消除兩個導航欄項目之間的差距？

如何消除兩個導航欄項目之間的差距？

2017-06-02 149 views
1

導航欄中的兩個項目之間有一個小差距。 這是HTML，CSS代碼：如何消除兩個導航欄項目之間的差距？

body{ 
 
      margin: 0px; 
 
      font-family: sans-serif; 
 
     } 
 
     ul{ 
 
      padding: 15px 0px; 
 
      background: grey; 
 
      list-style-type: none; 
 
     } 
 
     li{ 
 
      display: inline; 
 
     } 
 
     a{ 
 
      border: 1px solid black; 
 
      color: white; 
 
      text-decoration: none; 
 
      padding: 15px 15px; 
 
     } 
 
     a:hover{ 
 
      background: grey; 
 
      color: black; 
 
     } 
 
     a:active{ 
 
      background: white; 
 
     }

 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Support</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Support</a></li> 
 
    </ul>

Note the gap between the items

這是輸出。

如果我將margin的a標記設置爲-1，則間距會減小。

來源

2017-06-02 JavaBanana

回答

2

您可以將display: table;添加到您的<ul>元素中。這將刪除空間。

body{ 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
} 
 
ul{ 
 
    display: table; 
 
    padding: 15px 0px; 
 
    background: grey; 
 
    list-style-type: none; 
 
} 
 
li{ 
 
    display: inline; 
 
} 
 
a{ 
 
    border: 1px solid black; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 15px 15px; 
 
} 
 
a:hover{ 
 
    background: grey; 
 
    color: black; 
 
} 
 
a:active{ 
 
    background: white; 
 
}
<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Support</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Support</a></li> 
 
</ul>

來源

2017-06-02 05:55:56

1

您可以使用此，間距是因爲display:inline。檢查here瞭解更多信息有關的間距

body { 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
} 
 

 
ul { 
 
    padding: 15px 0px; 
 
    background: grey; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    display:inline-block; 
 
} 
 

 
a { 
 
    border: 1px solid black; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 15px 15px; 
 
} 
 

 
a:hover { 
 
    background: grey; 
 
    color: black; 
 
} 
 

 
a:active { 
 
    background: white; 
 
}
<ul> 
 
    <li><a href="#">Home</a></li><!-- 
 
    --><li><a href="#">Support</a></li><!-- 
 
    --><li><a href="#">Contact</a></li><!-- 
 
    --><li><a href="#">Support</a></li> 
 
</ul>

來源

2017-06-02 05:59:40 Swellar

1

如果我理解你正確，你必須每一個元素的邊距設置爲0：

* { 
    margin: 0; 
} 


* { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
} 
 

 
ul { 
 
    padding: 15px 0px; 
 
    background: grey; 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    display:inline-block; 
 
} 
 

 
a { 
 
    border: 1px solid black; 
 
    color: white; 
 
    text-decoration: none; 
 
    padding: 15px 15px; 
 
} 
 

 
a:hover { 
 
    background: grey; 
 
    color: black; 
 
} 
 

 
a:active { 
 
    background: white; 
 
}
<ul> 
 
    <li><a href="#">Home</a></li><!-- 
 
    --><li><a href="#">Support</a></li><!-- 
 
    --><li><a href="#">Contact</a></li><!-- 
 
    --><li><a href="#">Support</a></li> 
 
</ul>

來源

2017-06-02 06:03:12 Wernerson

1

我這個添加到你的CSS：

a { 
    margin-right: -5px; 
}

輸出：

output screenshot

來源

2017-06-02 06:03:53

1

這是因爲空白。有許多技術可以用來解決這個問題。

  1. 關閉和開啓之間移除空間li標籤：

    <ul> 
    <li> 
    <a href="#">Home</a></li><li> 
    <a href="#">Support</a></li><li> 
    <a href="#">Contact</a></li> 
</ul>

  2. 刪除收盤li標籤：

    <ul> 
    <li><a href="#">Home</a> 
    <li><a href="#">Support</a> 
    <li><a href="#">Contact</a> 
</ul>

  3. 使用註釋刪除空間：

    <ul> 
    <li><a href="#">Home</a></li><!-- 
    --><li><a href="#">Support</a></li><!-- 
    --><li><a href="#">Contact</a></li> 
</ul>

  4. 在CSS中ul要素使用font-size:0：

    ul { font-size: 0; } 
li { font-size: 16px; }

來源

2017-06-02 06:10:01

1

添加空間隱藏起來的空間...

 body{ 
 
      margin: 0px; 
 
      font-family: sans-serif; 
 
     } 
 
     ul{ 
 
      padding: 15px 0px; 
 
      background: grey; 
 
      list-style-type: none; 
 
     } 
 
     li{ 
 
      display: inline; 
 
     } 
 
     a{ 
 
      border: 1px solid black; 
 
      color: white; 
 
      text-decoration: none; 
 
      padding: 15px 15px; 
 
     } 
 
     a:hover{ 
 
      background: grey; 
 
      color: black; 
 
     } 
 
     a:active{ 
 
      background: white; 
 
     } 
 

 
     /* Add this */ 
 
     li:after { 
 
      content: ' '; 
 
      font-size: 0; 
 
     }

 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Support</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Support</a></li> 
 
    </ul>

來源

2017-06-02 06:13:47 Alohci

1

刪除空間，重新定義邊界的定義。

body { 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
} 
 

 
ul { 
 
    padding: 15px 0px; 
 
    background: grey; 
 
    list-style-type: none; 
 
    display: inline-block; 
 
} 
 

 
li { 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-right: 1px solid black; 
 
    float: left; 
 
    padding: 15px; 
 
    text-align: center; 
 
    min-width: 60px; 
 
} 
 

 
li:first-child { 
 
    border-left: 1px solid black; 
 
} 
 

 
a { 
 
    color: white; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
a:hover { 
 
    background: grey; 
 
    color: black; 
 
} 
 

 
a:active { 
 
    background: white; 
 
}
<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Support</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Support</a></li> 
 
</ul>

來源

2017-06-02 06:24:09 Gerard

相關問題

 相關問題