1

私はこれに似たもので終わりたいと思っています

「11 月 22 日」要素は、親 div の下部に配置し、中央に配置する必要があります。その後、残りの日付 (21、20、19、18) が続きます。(中央の縦線は説明のためのものです)。

これはcssで可能ですか？

編集：これが私がこれまでに得たものです：

<div class="container">
    <div id="motd">
        <ul>
            <li class="selected">22 November</li>
            <li>21</li>
            <li>20</li>
        </ul>
    </div>
</div>

そして、CSS

 .container
    {
        width: 960px;
        margin: 0 auto;
        overflow: hidden;
    }        

    #motd
    {
        width: 700px;
        height: 300px;     
        background-color: #efefef;       
        position: relative;
    }

    ul
    {
        position: absolute;
        left: 0;
        bottom: 0;          
    }

    li
    {
        float: left;
        list-style: none;
        padding: 7px 10px 7px 10px;
        background-color: #cacaca; 
        color: #ffffff;
    }

    li.selected
    {
        background-color: #393939;   
    }
4

2 に答える 2

0

位置を決めてはいけませんleft。（行ったように）要素を絶対に下に配置するだけで、左右の余白を に設定して中央に配置しますauto。

ul {
    position: absolute;
    bottom: 0;
    width: 90%;
    margin: 0 auto;
}

リストの幅を 100% に設定して、子をliリストの中央に配置することもできます。

于 2012-11-25T00:38:23.183 に答える
0

子に相対位置を使用し、子のスタイルを設定します

postion:relative;
margin-right:auto;
margin-left:auto;

2番目のオプションは、それに明確な幅を与え、親divを差し引くことです

親の div - 子、次に css の子の絶対位置と左: 差を 2 で割った値 (基本的に、両側に均等なピクセル数が必要です)

于 2012-11-25T00:13:17.413 に答える