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

回答

相关问题