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

＆＃13;

*{
    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;
}

＆＃13;

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

＆＃13;

Answer 2

这是因为<a>中的<li>有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;
}

fiddle

css布局菜单导航栏不会水平dsiplay

3 个答案: