列表未水平对齐/居中

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声明。