css - 列表未水平对齐/居中

Question

我无法将这些按钮集中在页面上。我只知道我错过了一些愚蠢的事情，但我不知道是什么。这是页面：

<div id="page1">
    <ul id="choiceBtns">
        <li>All Time</li>
        <li>Last 2 Weeks</li>
        <li>Last Year</li>
    </ul>
</div>

这是CSS：

#choiceBtns li{
    display:inline !important;
    border:solid;
    padding:3px;
}

#choiceBtns {
    margin:10px;
    margin-left: auto ;
    margin-right: auto ;
}

Answer 1

首先修改 CSS，如下所示：

#choiceBtns {
    margin:10px;
    margin-left: auto ;
    margin-right: auto ;
    text-align: center;
}

由于您的li子元素是inline，它们将在父块的宽度内居中，在您的情况下，这也是页面的宽度。

如果您需要添加垂直填充等，如果您应用于元素，display: inline-block您可能会获得更好的控制。li

最后，您不需要!important声明。