Question

当我第一次设置时，我的Css菜单很好，然后当我关闭I10并重新打开菜单时是垂直的。看看我的代码。

/** MENU */

#menu {
overflow: hidden;
background: #101010;
}

#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline-block;
}

#menu a {
display: block;
padding: 0px 40px 0px 40px;
line-height: 70px;
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-size: 16px;
font-weight: 200;
color: rgba(255,255,255,0.5);
border: none;
}

#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: rgba(255,255,255,0.8);
}

#menu .current_page_item a {
}

#menu .last {
border-right: none;
}

请让我知道我哪里出错。

HTML：

<div id="wrapper">
<div id="header-wrapper">
    <div id="header" class="container">
        <div id="logo">
            <h1><a href="#">Investment Services</a></h1>

        </div>
        <div id="social">
            <ul class="contact">

            </ul>
        </div>
    </div>
    <div id="menu" class="container">
        <ul>
            <li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
            <li><a href="#" accesskey="1" title="">Procedures</a></li>
            <li><a href="#" accesskey="2" title="">Task Rota</a></li>
            <li><a href="#" accesskey="3" title="">Docs & Links</a></li>
            <li><a href="#" accesskey="4" title="">Contact Us</a></li>
            <li><a href="#" accesskey="5" title="">Feedback</a></li>
        </ul>
    </div>
</div>

Answer 1

在这种情况下，<ul>通常不是问题 - 它是<li>

你最好使用这样的东西创建一个水平菜单：

ul {
    display: block
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
   display: inline-block;
   float: left;
}

<强>更新

根据this JSFiddle，您的菜单会水平显示吗？

Answer 2

如果您的问题尚未解决，请尝试此操作：

为“菜单”div中的“ul”提供ID，然后尝试以下课程：

假设你的'ul'的ID是'myUl'

#myUl li
{
    display: inline;
}

因为li项需要水平对齐，并且在给出类名时要在其父元素之后跟随。这里的父元素是ul而不是div

CSS发布UL垂直丢弃而不是水平

2 个答案: