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最後に、宣言は必要ありません。