CSS布局菜单导航栏不会水平显示

Question

我正在写一个带有水平显示的简单导航栏。 我应用了display：inline; 到下面CSS中的li元素，但似乎不起作用。 整个菜单当前垂直显示。

任何帮助都非常感谢。

<div class="header-nav-bar">
            <nav class="navbar" role="navigation">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">home1</a>
                            <ul>
                                <li><a href="#">AAAA</a></li>
                                <li><a href="#">BBBB</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Home2</a>
                        </li>
                        <li>
                            <a href="#">Home3</a>
                        </li>
                        <li>
                            <a href="#">Home4</a>
                            <ul>
                                <li><a href="#">cccc</a></li>
                                <li><a href="#">dddd</a></li> 
                            </ul>
                        </li>
                        <li>
                            <a href="#">Home5</a>
                        </li>
                    </ul>
                </div> 



.header-nav-bar
{
Position: relative;
background-color: #FFDB38;
padding: 0px;
margin: 0px;
}

.header-nav-bar  a{
display: block;
}

.navbar
{
postion: relative;
width:50%;
overlow: auto;
margin: auto;
}

.navbar ul ul{
display: none;
}

.navbar ul {
    padding: 0;
    margin: 0;
    border-radius: 10px;  
    list-style-type: none;
    position: relative;
}

.navbar ul li:hover ul{
display: block;
background-color: #FF7F00;
}

.navbar li
{
display: inline;
}

Answer 1

使用display: inline-block; 适用于.navbar ul > li

 *{ padding: 0; margin: 0; box-sizing: border-box; } .header-nav-bar { Position: relative; background-color: #FFDB38; padding: 0px; margin: 0px; } .header-nav-bar a{ display: block; } .navbar { postion: relative; width:50%; overlow: auto; margin: auto; } .navbar ul ul{ display: none; } .navbar ul { padding: 0; margin: 0; border-radius: 10px; list-style-type: none; position: relative; } .navbar ul > li{ display: inline-block; vertical-align: middle; position: relative; } .navbar ul li:hover ul{ display: block; background-color: #FF7F00; position: absolute; top: 15px; left: 0; } 

 <div class="header-nav-bar"> <nav class="navbar" role="navigation"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">home1</a> <ul> <li><a href="#">AAAA</a></li> <li><a href="#">BBBB</a></li> </ul> </li> <li> <a href="#">Home2</a> </li> <li> <a href="#">Home3</a> </li> <li> <a href="#">Home4</a> <ul> <li><a href="#">cccc</a></li> <li><a href="#">dddd</a></li> </ul> </li> <li> <a href="#">Home5</a> </li> </ul> </div> 

Answer 2

这是因为<li>的<a>具有display: block; 从而将您的<li>扩展到最大宽度。

如果您需要确保链接具有一定的宽度，例如90px，则将其设置为display: inline-block; width: 90px; 。

.header-nav-bar  a{
    display: inline-block;
    width: 90px;
}

Answer 3

尝试

.navbar li
{
display: inline;
float:left;
}

小提琴