HTML CSS導航欄間距

我做了一個CSS導航欄，但是在每個「navbar-item」之間，都有一點空間。我不希望那裏有任何變化！有沒有辦法做到這一點，而不改變每個navbar-item的餘裕？HTML CSS導航欄間距

<!doctype html> 
<html> 
    <head> 
     <title>Home - UnhandyFir9</title> 
     <style> 
      #wrapper { 
       box-shadow: 0px 0px 20px 10px black; 
       left: 0px; 
       top: 0px; 
       margin: auto; 
       margin-top: 30px; 
       width: 800px; 
       background-color: rgb(200, 200, 200); 
       font-family: sans-serif; 
      } 
      #top-notification { 
       display: inline-block; 
       width: 100%; 
       height: 20px; 
       background-color: lightblue; 
       text-align: center; 
      } 
      #navbar-core { 
       width: 100%; 
       height: 30px; 
       background-color: lightgreen; 
      } 
      #navbar-item { 
       display: inline-block; 
       width: 100px; 
       height: 30px; 
       text-align: center; 
       background-color: green; 
       color: white; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span> 
      <div id="navbar-core"> 
       <a href="home.html" id="navbar-item">Home</a> 
       <a href="lessons.html" id="navbar-item">Lessons</a> 
       <a href="aboutus.html" id="navbar-item">About Us</a> 
       <a href="donate.html" id="navbar-item">Donate</a> 
      </div> 
     </div> 
    </body> 
</html>

enter image description here

來源

2013-10-25 UnhandyFir9

標識** **必須是唯一的。 – j08691

j08691：這不會影響渲染，所有瀏覽器仍然會正確應用樣式。這是一個違反標準的行爲，會打破當然的驗證，並且令人難以置信地搞砸Javascript。 –

@NielsKeurentjes - 我說它影響渲染還是會解決問題？ – j08691

首先，

#navbar-item { 
    display: inline-block; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
}

更改爲一個class，而不是一個id。 Id是唯一的，只能在頁面上使用一次，但一個類可以反覆使用。

我敢肯定的空間距離，但我會做出小提琴測試，

顯示：inline-block的;

您可以將display: inline-block;更改爲float: left;並且沒有空間。

JSFIDDLE

來源

2013-10-25 01:59:06

-1

要快速解決您的問題，您可以與跨度包裹你的鏈接，並給它一個黑暗的背景：

<div id="navbar-core"> 
    <span class="navbar-inner-wrapper"> 
      <a href="home.html" id="navbar-item">Home</a> 
      <a href="lessons.html" id="navbar-item">Lessons</a> 
      <a href="aboutus.html" id="navbar-item">About Us</a> 
      <a href="donate.html" id="navbar-item">Donate</a> 
    </span> 
</div>

然後將其添加到您的CSS：

.navbar-inner-wrapper { 
    background-color: green; 
}

來源

2013-10-25 02:00:29

你不應該試圖快速解決它，而是嘗試修復什麼是壞的。 -1 –

問題在於display:inline-block - 它將元素減少爲內嵌塊，這意味着它們的行爲與HTML中的所有其他內聯內容類似。由於錨元素之間存在空格，而這些元素一直會壓縮爲單個空格，所以您看到的是當前字體大小之間的實際「空格」，就像在句子中的單詞之間一樣。你可以通過在容器上應用font-size:0來解決這個問題，但這很麻煩，因爲你必須重置它給孩子們。推薦的方法是僅使用float:left，並正確手動設置父級的大小，並將項目設置爲height:100%。

使用具有相同ID的多個元素是錯誤的，但不會導致此問題 - 應該仍然是固定的。

來源

2013-10-25 02:02:38

正如我在我的評論中提到的，ID必須是唯一的，所以請使用類。這就是說，你的鏈接是內聯元素，並且對空白區域很敏感，所以要麼將它們浮起，要麼刪除代碼中元素之間的空白區域。

例：

.navbar-item { 
    display: inline-block; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
    float:left; 
}

jsFiddle example

空格去掉jsFiddle example

來源

2013-10-25 02:02:41 j08691

試試這個;

.navbar-item { 
    display:block; 
    float:left; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
} 

<div id="wrapper"> 
<span id="top-notification">== Hi! Our site was just recently launched, so you may expect alot of bugs! Sorry 'bout that! ==</span> 
<div id="navbar-core"> 
<a href="home.html" class="navbar-item">Home</a> 
<a href="lessons.html" class="navbar-item">Lessons</a> 
<a href="aboutus.html" class="navbar-item">About Us</a> 
<a href="donate.html" class="navbar-item">Donate</a> 
</div>

來源

2013-10-25 02:03:48

使用float: left;而不是display: inline-block;使用inline-block的將默認4PX保證金，但使用float: left;默認情況下不具備的空間。並且每個a element使用類沒有id，id是唯一的，不應該重複。

.navbar-item { 
    /*display: inline-block;*/ 
    float: left; 
    width: 100px; 
    height: 30px; 
    text-align: center; 
    background-color: green; 
    color: white; 
}

如果你仍然想使用的inline-block代替float: left;你應該使用margin-left: -4px;

來源

2013-10-25 02:08:32

HTML CSS導航欄間距

回答

相關問題