Question

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

基本上我是这样看的：

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

我认为您无法在UL内部使用DIV。我确信你只能通过添加合适的样式来获得与LI相同的结果。

Answer 2

问题1：除了ul之外，您不能将其他任何内容放入li。我会考虑另一种方法来跳过语法上无用的样式 - div：

JS-Fiddle Example

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

您可以通过将font-size设置为0并在li上重置它来避免内联元素之间的空格。

Answer 3

如果您不希望在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;
}

Here's the fiddle

Answer 4

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

在jsFiddle之后显示您的代码中删除了空格的结果会产生我认为您想要的内容。

http://jsfiddle.net/jPF2p/

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

4 个答案: