无序标签横向排列

最新推荐文章于 2021-10-10 22:58:28 发布

renlmingj

最新推荐文章于 2021-10-10 22:58:28 发布

阅读量2.3k

点赞数 2

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44509418/article/details/120600500

版权

css 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了前端开发中遇到的无序列表元素横向排列时，因边距导致最后一个元素换行的问题。通过设置CSS样式，特别是利用`:nth-child`选择器消除特定元素的右边距，以及`:first-child`选择器去除第一行元素的上边距，成功解决了这一布局挑战。此外，还提到了兼容性问题，指出此方案适用于IE9及以上浏览器，并解释了清除浮动的必要性。

摘要由CSDN通过智能技术生成

相信很多刚开始学习前端的小伙伴都遇到过无序标签横向排列的时候最后一个盒子总会因为加边距而掉到第二行显示的问题吧？这篇文章我就来教大家解决这个问题！

html代码如下：

<div class="box">
    <ul class="clearfix">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

这是一个div里面写了十个li标签，每个盒子宽300px，高200px，每个盒子距离上下左右均为10px，div宽为1540px。

css代码如下：

* {
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* 清除浮动 */
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        font-size: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        zoom: 1;
    }

    .box {
        width: 1540px;
        /* 盒子上下200px，左右居中 */
        margin: 200px auto;
    }

    .box ul li {
        float: left;
        width: 300px;
        height: 200px;
        background: #ccc;
        list-style: none;
        margin: 10px 10px 0 0;
    }

    /* 去掉每行最后一个盒子的边距 */
    .box ul li:nth-child(5n) {
        margin-right: 0;
    }

    /* 去掉第一行盒子的上边距 */
    .box ul li:nth-child(-n+5) {
        margin-top: 0;
    }

浏览效果：

在这里插入图片描述
注：以上解决方案适用于IE9及以上版本浏览器，低版本浏览器并不兼容这样的写法，如果使用低版本浏览器即可将div大盒子的宽度做适当的调整，使里面的li标签能够排列在一行显示即可；除此之外还有里面写到清除浮动操作，由于div里面的li标签均添加的浮动(float)，并且div盒子并没有添加固定的高度，所以添加浮动以后div盒子将不会被li标签自动撑开，所以就需要使用清除浮动让div盒子自动撑开。