去除列表右边框

最新推荐文章于 2023-06-30 01:20:52 发布

weixin_30328063

最新推荐文章于 2023-06-30 01:20:52 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/feile/p/5368123.html

版权

<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>