html - 导航栏，列表项之间的可见空间

Question

我创建了一个传统的导航。在每个 li 之间，我放置了一个宽度为 1px 且高度略小于导航栏的 div。

基本上我打算这样看：

http://subalee.com/nav.jpg

HTML：

<nav>
    <ul>
    <div></div>
    <li><a href="#">Domov</a></li>
    <div></div>
    <li><a href="#">Služby</a></li>
    <div></div>
    <li><a href="#">O nás</a></li>
    <div></div>
    <li><a href="#">Kontakt</a></li>
    <div></div>
    </ul>
</nav>

CSS：

nav ul div {
    height:31px;
    width:1px;
    background-color:#34b9ff;
    display:inline-block;
}

nav ul li {
    display:inline;
}

nav ul li a {
    display:inline-block;
    padding:10px;

当我将 div 更改为 display:inline; 文本工作正常，但那些可见的空间不知何故消失了。

Answer 1

在这些情况下的主要问题是你不能在li' 之间有任何空格，因为这会显示出来。

跟随 jsFiddle 准确显示您的代码，删除了空格会导致我认为您想要的结果。

http://jsfiddle.net/jPF2p/

Answer 2

我不认为你可以在 UL 中有一个 DIV。我敢肯定，通过添加适当的样式，您可以仅使用 LI 获得相同的结果。

Answer 3

问题 1：您不允许将任何其他内容放入ulexceptli中。我会考虑另一种方法来跳过语法上无用的样式-div：

JS-小提琴示例

nav ul li {
    font-size: 16px;
    display:inline;
    padding: 2px 0px;
    border-right: 1px solid blue;
}

您可以通过设置font-size为 0 并在li.

Answer 4

如果您不希望在 html 中声明元素的方式发生任何变化，请使用

border-left:1px solid #34b9ff;

而不是background-color: 和使用display:inline;

完整的 CSS 看起来像

nav ul div {
    height:31px;
    width:1px;
    border-left:1px solid #34b9ff;
    display:inline;
}

这是小提琴