導航欄，列表項之間的可見空間

我創建了一個傳統的導航。在每個李之間我把一個div與1px的寬度和略低於導航欄的高度。導航欄，列表項之間的可見空間

基本上我會爲這個樣子：

HTML：

<nav> 
    <ul> 
    <div></div> 
    <li><a href="#">Domov</a></li> 
    <div></div> 
    <li><a href="#">Služby</a></li> 
    <div></div> 
    <li><a href="#">O nás</a></li> 
    <div></div> 
    <li><a href="#">Kontakt</a></li> 
    <div></div> 
    </ul> 
</nav>

CSS：

nav ul div { 
    height:31px; 
    width:1px; 
    background-color:#34b9ff; 
    display:inline-block; 
} 

nav ul li { 
    display:inline; 
} 

nav ul li a { 
    display:inline-block; 
    padding:10px;

當我改變的div顯示：內聯;文本正常工作，但這些可見空間不知何故消失。

來源

2013-04-10 IamLee

的可能重複[哪裏各地IMG元素的空間產生的？]（http://stackoverflow.com/questions/15380670/where-does-the-space-around-img-elements-originate ） – 2013-04-10 13:27:22

從上面標記的重複內容中可以接受的答案 - 這是由於你的'inline'和'inline-block'元素之間的html空白。另外請注意，您的HTML無效，因爲您不應該將'div'元素直接插入'ul'元素 – 2013-04-10 13:31:41

問題1：除了li之外，您不得將其他任何東西放入ul。我會考慮另一種方式來跳過語法無用的造型-的div：

JS-Fiddle Example

nav ul li { 
    font-size: 16px; 
    display:inline; 
    padding: 2px 0px; 
    border-right: 1px solid blue; 
}

你可以通過設置font-size爲0，並重置它的li避免內聯元素之間的空格。

來源

2013-04-10 13:28:23 nirazul

是的，這是我的第二個選擇，但是在你的例子中，這些邊界與li elemnt的高度相同，我希望它們稍微長一些，但無論如何，我想我會用你的例子，謝謝:) – IamLee 2013-04-10 13:37:44

哦，這很容易完成！只需添加一些填充到您的列表項。看到我更新的小提琴。當你的問題得到解答時，你應該接受最能幫助你的答案。否則越來越少的人會試圖幫助你:) – nirazul 2013-04-10 13:50:20

謝謝，有點新來stackexchange網站:) – IamLee 2013-04-10 17:19:11

我不認爲你可以在UL內有DIV。我相信你只能通過添加適當的樣式來獲得與LIs相同的結果。

來源

2013-04-10 13:28:20 AndreCruz

在'ul'中具有'div'不符合HTML5，其中聲明UL應該包含0或更多列表項。 http://www.w3.org/TR/html5/grouping-content。html＃the-ul-elements – Exelian 2013-04-10 13:36:46

，如果你不想在元素在你的HTML聲明的方式的任何變化，然後使用

border-left:1px solid #34b9ff;

代替background-color: 和使用display:inline;

完整的CSS看起來像

nav ul div { 
    height:31px; 
    width:1px; 
    border-left:1px solid #34b9ff; 
    display:inline; 
}

Here's the fiddle

來源

2013-04-10 13:28:30 GeekyCoder

這些情況下的主要問題是，你不能在li之間有任何空格，因爲這會顯示出來。

以下jsFiddle顯示您的代碼與空間刪除結果，我認爲是你想要的。

http://jsfiddle.net/jPF2p/

來源

2013-04-10 13:33:14 Exelian

那麼這就是我的問題，李被推倒：/無論如何，我不知道我不能有李之間的任何東西，所以感謝指出:) – IamLee 2013-04-10 13:34:59

導航欄，列表項之間的可見空間

回答

相關問題