Question

我遇到了一个无法解决的问题。

我有一个列表列表，如下所示：

<ul id="nav">
    <li>
        <div  class="tabquad">
            Item 1
        </div>

        <ul>
            <li>
                <a class="item" href="index.jsp?quad=1">
                    <div  class="tabquad">
                        1.1
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=2">
                    <div  class="tabquad">
                        1.2
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=3">
                    <div  class="tabquad">
                        1.3
                    </div>
                </a>
            </li>
        </ul>
    </li>
    <li>
        <div  class="tabquad">
            Item 2
        </div>

        <ul>
            <li>
                <a class="item" href="index.jsp?quad=7">
                    <div  class="tabquad">
                        2.1
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=8">
                    <div  class="tabquad">
                        2.2
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=9">
                    <div  class="tabquad">
                        2.3
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=10">
                    <div  class="tabquad">
                        2.4
                    </div>
                </a>
            </li>
            <li>
                <a class="item" href="index.jsp?quad=11">
                    <div  class="tabquad">
                        2.5
                    </div>
                </a>
            </li>
        </ul>
    </li>
</ul>

使用这个CSS：

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

#nav {
    width: 45em;
    margin: 0 auto;
}

#nav a {
    display: block;
    width: 15em;
}

#nav li {
    float: left;
    width: 15em;
}
#nav li ul {
    position: absolute;
    width: 15em;
    left: -500em;
}

#nav li:hover ul {
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}
.item{
    color:#0E4063;
    text-decoration:none;
}
.tabquad{
    color:white;
    margin:auto;
    position:relative;
    border:1px solid #000;
    border-color:rgb(82,115,154);
    width:200px;
    height:30px;
    text-align:center;
    padding-top:10px;
    top:25px;
    background-color:rgb(0,56,130);
}
    .tabquad:hover{
    background-color:rgb(49,87,132);
    cursor: hand;
}

我的问题是：第1项列表和第2项列表不在我的页面中心，它们是左侧的。

我尝试过使用center参数和float，但没有成功。

有什么建议吗？

你可以在这里找到一个小提琴：Link

Answer 1

您必须将#nav的宽度设置为正确的值（对应于内容的宽度）。将您的示例更改为以下值，两个菜单将在页面上居中。

#nav {
    width: 30em;
    margin: 0 auto;
}

更新了jsFiddle：http://jsfiddle.net/F9Wrb/17/

只是为了增加跨浏览器兼容性，将以下CSS添加到#nav的父节点：

body {
    text-align: center;
}

Answer 2

这是您的解决方案。我刚刚改变了这两种风格。仅供参考，除非您使用的是html5，否则您无法将div放入<a>标记内;这是无效的。

#nav, #nav ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    text-align:center
}
#nav li {
    width: 15em;
    display:inline-block;
}

Answer 3

您可能希望了解CSS页面居中和页面布局的基础知识。

通常，您有一个“容器”<div>，它包含整个页面并定义页面的布局和边界。您可以将其称为任何内容（不一定是container）

现在，您需要确定哪种布局最适合您，最常用的布局尺寸可能会在960px到1200px之间的任何位置变化。

您容器的一般样式是，

.container{
    width:960px; //<-- this can be anything, based on your layout.
    margin:0 auto;
}

这可确保您的网页几乎始终居中。您可能希望使用某种CSS Reset来确保重置浏览器默认值

Answer 4

三种可能的解决方案：

使用绝对定位和负左边距：

#nav {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -15em;
}

Demo 1

使用指定了ul宽度的自动边距：

#nav {
    width: 30em;
    margin: 0 auto;
}

Demo 2

如果您想使用自动边距解决方案而不想指定ul宽度，请将LI声明为display: inline-block（而不是浮动它们）。这是有效的，因为LI现在将在页面流中而不是在页面流中，因为它们在浮动时。答案由Kashif Raza提供。
```
#nav {
    margin: 0 auto;
}
#nav > li {
    display: inline-block;
    width: 15em;
}
```
Demo 3

Answer 5

#nav a {
    display: block;
    width: 15em;
    margin:auto;
}

#nav>li {
    width:50% !important;
}

#nav li:hover ul {
    position:relative;
    left: auto;
}

在CSS中进行这些更改，列表将位于页面的中心。

Answer 6

只需在周围的div上放一个宽度，然后将其更改为margin：0 auto，它将在页面中居中。

.center{
    width:400px;
    margin:0 auto;
}

和html，而不是float =“center”

<div class="center">

http://jsfiddle.net/F9Wrb/12/

如上所述，float="center"没有，或者float:center;！对于元素的高级定位，我建议使用CSS框架，例如zurb foundation或Gridpak.com

Answer 7

将它放在您想要居中的位置：

div align="center"

如何在列表</ul>中居住<ul>

7 个答案: