CSS列表邊框不填充HTML Div

我有一個僅使用HTML和CSS的導航欄/列表。導航欄的背景圖像高45px。CSS列表邊框不填充HTML Div

列表元素已使用CSS border-left屬性進行設置。我基本上想要在列表中的每個項目之前有一個垂直分隔符。

當我將列表中的字體更改爲大約30px時，border-left的高度填充了div的45px高度，這很好。但是當我將字體的大小設置得更小時，邊界不再填充div的高度。

如何設置列表中的字體很小，但仍然有border-left的高度爲45px？

我已將代碼放在下面。在此先感謝

CSS：

#navbar{ 
    background-image: url('../images/navbar.png'); 
    color: white; 
    font: 25px arial,sans-serif; 
    height: 45px; 
} 
#navbar a{ 
    color: white; 
    text-decoration: none; 
} 
#navbar ul{ 
    list-style: none; 
    margin: 5; 
    padding: 5; 
} 
#navbar li{ 
    border-left: solid 1px white; 
    display: inline; 
    padding: 1px 10px 1px 1px; 
    margin: 10px; 
}

HTML：

<div class="clear" id="navbar"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Start</a></li> 
     <li><a href="#">In Jouw Regio</a></li> 
    </ul> 
</div>

來源

2011-12-05 user866190

這裏有一個解決方案：

http://jsfiddle.net/bQe6W/1/

我改變了以下

#navbar li { 
    display: inline-block; 
    line-height: 45px; 
    margin: 0 10px; 
}

還設置div的背景爲灰色，以便您可以看到示例！

來源

2011-12-05 15:50:27

這不會在IE7中工作，但是 - 你也可以使用display：block + float：left http://jsfiddle.net/CU7NV/1/ – ptriek

@ptriek ...好點，雖然display：block是暗示如果你正在浮動元素，你不需要指定它。 –

@ Terminal-Frost有趣，不知道。 – ptriek

對於#navbar li改變顯示爲inline-block並設置height到100%並設置line-height到45px。

來源

2011-12-05 15:53:16

非常感謝 – user866190

CSS列表邊框不填充HTML Div

回答

相關問題