html - CSS 列表边框不填充 HTML Div

Question

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

已使用 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>  

Answer 1

这是一个解决方案:

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

我改变了以下内容

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

同时将 div 的背景设置为灰色，这样您就可以看到示例了!