css布局菜单导航栏不水平显示答案

【问题标题】：css layout menu navigation bar doesn't dsiplay horizontallycss布局菜单导航栏不水平显示
【发布时间】：2015-05-17 18:52:34
【问题描述】：

我正在编写一个带有水平显示的简单导航栏。我申请了 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;
}

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

尽管这解决了问题，但它并没有解释导致不良行为的原因。有关解释（以及根本问题的真正解决方法），请参阅下面的答案。
感谢您的回答！只是一个简单的问题，'.navbar ul > li' 中的 '>' 是什么。我删除了它，它看起来一样。
这意味着li 必须是ul 的直接子代。例如，您可能希望在<li> 中使用有序列表<ol>，该列表也有<li> 作为子级。 ul > li 不会针对那些，而ul liwill。这是否回答你的问题？否则，可能值得提出一个关于 SO 标题的新问题“ul > li 和 ul li 之间有什么区别？”

【解决方案2】：

这是因为<li> 中的<a> 具有display: block;，因此将<li> 扩展至最大宽度。

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

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

【讨论】：

【解决方案3】：

试试

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

fiddle

【讨论】：

这不是解决方案，请参阅下面的帖子。除了引起与浮动行为有关的所有问题。