CSS列表边框未填充HTML Div

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

列表元素已使用CSS

border left

属性设置。我基本上希望在列表中的每个项目之前都有一个垂直分隔符

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

div

的高度

如何将列表中的字体设置为小字体，但仍将左边框的高度设置为45px

我把代码放在下面。提前谢谢

CSS:

HTML:

这里有一个解决方案：

我更改了以下内容

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

---

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

对于

#navbar li

将显示更改为

内联块

，将

高度设置为
100%
，将
行高度设置为
45px
这在IE7中不起作用，但是-您也可以使用display:block+float:left@ptriek。。。虽然display:block是隐含的，但如果您浮动元素，则不需要指定它。@Terminal Frost有趣，我不知道这一点。
<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>  

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