去除列表右边框 

<style type="text/css">
body,ul,li {
    padding: 0;
    margin: 0; /* 好的习惯：清除内外边距，避免受默认格式的影响 */
}

ul,li {
    list-style: none; /*清除列表默认格式  */
}

.demo {
    width: 320px;
    height: 210px;/*运用负margin进行垂直居中必须指定宽度和高度  */
    
    border: solid 5px black;
    
    margin: auto;/* 水平居中 */
    
    position: absolute;/* 垂直居中：绝对定位 */
    left: 50%;
    top: 50%;
    margin-left: -160px;
    margin-top: -110px;
}

ul {
    margin-right: -10px; /*文档流元素分别向左移动10px  */
    margin-bottom: -10px; /*文档流元素分别向上移动10px  */
    overflow: hidden; /*  将超出框体的内容隐藏*/
}

li {
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>
<body>
    <div class="demo">
        <ul>
            <li>子元素1</li>
            <li>子元素2</li>
            <li>子元素3</li>
            <li>子元素4</li>
            <li>子元素5</li>
            <li>子元素6</li>
        </ul>
    </div>
</body>

posted @ 2016-04-08 14:55  绯乐  阅读(242)  评论(0)  编辑  收藏  举报