Question

您好我正在设置一个居中的页脚，它使用每个列表项中包含无组织列表的列表项。如果我尝试使用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>

Answer 1

beacuse内容以容器内的text-align为中心，默认情况下是容器的100％宽度，但如果它是浮动的则更少。

无论如何我不明白你想要达到什么目的？您想将列表项居中，但同时浮动它？你能更精确一点吗？

Answer 2

的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;
}

Example

您居中的问题在于，您居中儿童的父元素必须是一个块元素。见MDN

使用display显示li项：使内部具有ul的内联

2 个答案: