0

嗨，我正在寻找一个居中的页脚，它使用列表项和每个列表项内部的无组织列表。如果我尝试使用 float:left 我会让它们彼此内联，但它不再居中。我目前拥有的代码如下所示：css：

@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
display:inline;
}

html:

<div id="box1">
<ul id="mainList">
    <li class="mainLI">
        <p>Title</p>
        <ul class="subList">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </li>
    <li class="mainLI">
        <p>Title</p>
        <ul class="subList">
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </li>
</ul>
</div>
4

2 回答 2

0

CSS：

@charset "utf-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}
#box1 {
    margin:0 auto;
    background-color:#00FF66;
}
#mainList {
    list-style-type:none;
    text-align:center;
}

#mainList li, .mainLI p {
    display:inline;
}

例子

您居中的问题在于您要居中子级的父元素必须是块元素。见MDN

于 2012-05-09T18:43:27.820 回答
0

这是因为内容以容器内的文本对齐为中心，默认为容器的 100% 宽度，但如果它是浮动的，则更少。

反正我不明白你想达到什么目的？您想将列表项居中但同时使其浮动？你能更精确一点吗？

于 2012-05-09T18:33:37.627 回答