Question

我无法将此水平列表下拉菜单置于中心位置。我是否需要重新编写所有css，因为我正在使用浮动？

以下是与列表位置有关的所有代码。或者点击此处查看直播

.megamenu {
margin:auto;
position:absolute;
margin:0;
width:100%;
font-size:1.182em;
list-style:none;
padding:0px;
line-height:38px;
font-weight: bold;
display:block;
list-style:none;
border-right: none;
top: -1px;
list-style-type:none;
list-style-position:inside;




.megamenu > li {

    display:inline;
    border:none;
    margin:0;
    float:left;
    padding: 0px 0 0px 30px;
    -webkit-transition: background-color 0.4s ease-out;
    -moz-transition: background-color 0.4s ease-out;
    -o-transition: background-color 0.4s ease-out;
    -ms-transition: background-color 0.4s ease-out; 
    border-right: none;
    transition: background-color 0.4s ease-out;

}

任何帮助将不胜感激

Answer 1

我遇到了很多问题，但有一天我终于找到了解决方案。这是使用表和css自动边距。这是我的伎俩。只需更改中心td的宽度并添加导航。

<table>
<td style="margin:0 auto;">
</td>
<td width="800"> <----Change this to the width of your nav bar.

PUT THE NAVIGATION HERE

</td>
<td style="margin:0 auto;">
</td>
</table>

Answer 2

据我所知，你不应该在内联元素中嵌套块级元素。话虽如此，我已经通过简化您的HTML并使用子无序列表替换包含“内容”的<div>来创建this JSFiddle solution。（理论上，如果您愿意，此子列表只有一个<li>，则应该能够将<div>与内容保持在一起。）

HTML因此：

<ul id="menu">
    <li>Home
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>One day
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>I wish to
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Be in the
        <ul>
            <li>Content</li>
        </ul>
    </li>
    <li>Centre of this page
        <ul>
            <li>Content</li>
        </ul>
    </li>
</ul>

CSS设置如下：

#menu {
    text-align: center;
    height: 30px;
}

#menu li {
    list-style: none;
    display:inline-block;
    margin: 5px 15px;
}

#menu li ul {
    display: none;
}

#menu li:hover ul {
    display: block;
    position: absolute;
    top: 30px; /* height of menu */
    left: 25px;
    right: 25px;
}

在JSFiddle中，我添加了一些颜色，以明确哪个元素在哪里。我也删除了你的实例中的动画CSS，但这应该很简单。[/ p>

此方法依赖于为菜单提供绝对高度 - 在此示例中为30px - 然后使用<div>绝对定位显示在其下方的“内容”top: 30px （或者菜单高度恰好是什么）。

Answer 3

有很多不同的方法可以做到这一点 - 你需要给它一个宽度，而不是100％。这可以吗？

然后使用宽度，您可以在ul上使用display:inline，在父div上使用text-align:center，或者使用margin:auto。

如果这没有帮助，请告诉我，我会为你做一个小提琴：）

居中<ul> <li>水平下拉菜单</li> </ul>

3 个答案: