1

我一直无法将这个水平列表下拉菜单居中。我是否必须重新设计所有的 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;

}

任何帮助将不胜感激

4

3 回答 3

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>
于 2012-09-03T00:06:49.467 回答
1

据我了解，您不应该将块级元素嵌套在内联元素中。话虽如此，我已经通过简化您的 HTML 并将包含“内容”的内容替换为子无序列表来创建此 JSFiddle 解决方案。（理论上，如果您愿意<div>，这个只有一个<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，但这应该很容易重新插入。

这种方法依赖于给菜单一个绝对高度——在这个例子中30px——然后绝对定位<div>出现在它下面的悬停的“内容” top: 30px（或者菜单高度恰好是什么）。

于 2012-09-03T00:21:49.137 回答
1

有很多不同的方法可以做到这一点——不过，你需要给它一个宽度，而不是 100%。那样可以么？

然后有了适当的宽度，您可以display:inline在 ul 和text-align:center父 div 上使用，或者使用margin:auto.

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

于 2012-09-03T00:30:01.980 回答