Question

我想最终得到与this

类似的内容

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

Answer 1

为孩子使用postion亲戚并为孩子设计风格

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

第二个选项是给它一个明确的宽度并减去父div

父div - 孩子然后css儿童位置绝对和左：差异除以2（基本上你想要每边的偶数像素数量

Answer 2

你没有设置left位置。只将元素绝对放在底部（如您所做），然后通过将左右边距设置为auto来居中。

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

您还可以将列表的宽度设置为100％，并将子li放在列表中心。

在<div> </div> </div> </ul>的底部居中<ul>或<div>

2 个答案: