当位置列表元素时,混淆的CSS正确

时间:2016-04-10 20:32:55

标签: html css list css-position

我想将最后<li>定位在底部:0px 。这是我的CSS:

    #o{
        width:350px;
        height:100%;
        color:rgb(70,70,70);
        position:fixed;
        top:0px;
        right:0px;
        display:none;
        z-index:102;
    }
@media only screen and (max-width:777px){
    #o{
        width:100%;
        height:100%;
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
        }
    }
    #o .c{}>ul{
        position: relative;
        top: 0px;
        left: 0px;
    }

这是最后一个<li>的代码:

#o .c .sender{
    width: 100%;
    height: 100px;
    background: rgb(248, 248, 248);
    position: absolute;
    bottom: 0px;
    left: 0px;
}

这是我的HTML:

<div id="o">
<ul>
        <li class="c">
            <ul>
                <li class="texts">
                    <ul id="textsul">
                    </ul>
                </li>
                <li class="sender">
                    <ul>
                        <li class="area">Area</li>
                        <li class="submit">Send</li>
                    </ul>
                </li>
            </ul>
        </li>
</ul>
</div>

这很好用(OS X safari,OS X Chrome,PC Chrome,Android Chrome,iOS Safari和iOS Chrome),但我不明白 {} 之间的内容是什么CSS代码中的strong> .c 类和&gt; ul 。我不知道写它的正确方法是什么。

请注意该行代码:

ul {
    list-style: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

工作示例https://jsfiddle.net/2w2jffp7/

0 个答案:

没有答案