CSS列表边框未填充HTML Div答案

【问题标题】：CSS List Border Not Filling HTML DivCSS列表边框未填充HTML Div
【发布时间】：2012-01-13 08:15:14
【问题描述】：

我有一个仅使用 HTML 和 CSS 的导航栏/列表。导航栏的背景图片高度为 45 像素。

已使用 CSS border-left 属性设置列表元素。我基本上想在列表中的每个项目之前有一个垂直分隔符。

当我将列表中的字体更改为 30px 左右时，左边框的高度会填充 div 的 45px 高度，这很好。但是当我将字体的大小设置为较小时，左边框不再填充div 的高度。

如何将列表中的字体设置为小而仍将border-left 的高度设置为 45 像素？

我已将代码放在下面。提前致谢

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>

【问题讨论】：

标签： html css

【解决方案1】：

这里有一个解决方案：

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

我更改了以下内容

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

还将 div 的背景设置为灰色，以便您可以查看示例！

【讨论】：

这在 IE7 中不起作用，但是 - 你也可以使用 display:block + float: left jsfiddle.net/CU7NV/1
@ptriek... 好点，虽然 display: block 如果你浮动元素是隐含的，你不需要指定它。
@Terminal-Frost 有趣，不知道。

【解决方案2】：

对于#navbar li，将显示更改为inline-block，并将height 设置为100%，并将line-height 设置为45px。

【讨论】：