Question

我试图创建一个水平菜单：

CSS

 #menu {
        display:inline;
        float:right;
    }
    #menu > li {
        display:inline;
        list-style:none;
        width:40px;
        border-top:4px solid #FFFFFF;
        padding-top:20px;
        margin-top:25px;
    }

HTML：

<div id="menu">
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</div><!-- menu -->

我添加了display:inline;，但当top-border移除display:inline;时它们无法正常显示，但它们都显示在垂直列表中

Answer 1

您缺少一个UL元素，它基本上表示以下列表项是无序列表的一部分。这是一个小提琴：

http://jsfiddle.net/VgRYv/

<div id="menu">
    <ul id="navlist">
        <li>HOME</li>
        <li>HOME</li>
        <li>HOME</li>
        <li>HOME</li>
        <li>HOME</li>
        <li>HOME</li>
    </ul>
</div>

ul#navlist li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

Answer 2

您缺少UL标记。现在我已经更新了你的代码。检查以下代码

CSS

#menu {
        display:inline;
        float:right;
    }
    #menu > ul > li {
        display:inline;
        list-style:none;
        width:40px;
        border-top:4px solid #000;
        padding-top:20px;
        margin-top:25px;
    }

HTML

<div id="menu">
    <ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
    </ul>
</div><!-- menu -->

JSFiddle Demo

Answer 3

使用display: inline-block;代替inline（或者，作为替代方案，将float: left应用于每个<li>）

Answer 4

disply:inline-block;使用li而float只使用ul

http://jsfiddle.net/c94hG/1/

（为了显示目的，我更改了边框的颜色。它是白色的）

Answer 5

将float:left添加到li，或将display:inline-block添加到li

Answer 6

试试这个

#menu {
    display:inline;
    float:right;
}
#menu > li {

    list-style:none;
    width:40px;
    border-top:4px solid #FFFFFF;
    padding-top:20px;
    margin: 25px 8px 0 8px;
    float:left;
}

水平菜单项不显示内联

6 个答案: