2

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

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-borderdisplay:inline;

4

6 回答 6

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 演示

于 2013-06-27T09:03:55.500 回答
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;
}
于 2013-06-27T08:29:54.937 回答
0

尝试这个

#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;
}
于 2013-06-27T08:35:53.200 回答
0

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

于 2013-06-27T08:28:56.197 回答
0

用于和仅disply:inline-block;用于lifloatul

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

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

于 2013-06-27T08:31:08.597 回答
0

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

于 2013-06-27T08:33:12.063 回答