Question

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

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

当我将列表中的字体更改为大约30px时，边框左侧的高度填充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的背景设置为灰色，以便您可以看到示例！

Answer 2

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

CSS列表边框不填写HTML Div

2 个答案: