css如何实现横向布局

这篇文章将为大家详细讲解有关css如何实现横向布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

横向布局

横向布局指容器内节点以水平方向排列且溢出部分被隐藏的占位布局。竖向布局很常见，声明overflow:hidden;width:xpx;height:ypx就能实现，但横向布局却不能使用类似方式实现。

为了方便使用多种方式实现横向布局，以下将通用代码拆分出来。

<div class="horizontal-layout">
    <ul>
        <li>Alibaba</li>
        <li>Tencent</li>
        <li>Baidu</li>
        <li>Jingdong</li>
        <li>Ant</li>
        <li>Netease</li>
        <li>Meituan</li>
        <li>ByteDance</li>
        <li>360</li>
        <li>Sina</li>
    </ul>
</div>

.horizontal-layout {
    overflow: hidden;
    width: 300px;
    height: 100px;
    ul {
        overflow-x: auto;
        cursor: pointer;
        &::-webkit-scrollbar {
            height: 10px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #f66;
        }
    }
    li {
        overflow: hidden;
        height: 90px;
        background-color: #66f;
        line-height: 90px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        &:not(:first-child) {
            margin-left: 10px;
        }
    }
}

有些同学可能会使用行内元素实现横向排版，但必须声明overflow-y:hidden使容器在Y轴方向隐藏溢出部分。由于行内元素在当前行排版产生溢出会自动将其余节点排版到下一行，因此还需声明white-space:nowrap使所有行内元素在一行内排版完毕。若产生滚动条，还需对容器的height做适当的微调。

.horizontal-layout.inline {
    height: 102px;
    ul {
        overflow-y: hidden;
        white-space: nowrap;
    }
    li {
        display: inline-block;
        width: 90px;
    }
}

上述方式在笔者在开发认知里觉得太繁琐，实质上将所有节点当成文本排列，也是醉了。笔者推荐使用flex布局完成上述布局，flex布局作为目前最常见的布局方式，相信也不用笔者多说。以下实现方式不知大家是否见过呢？在移动端上体验会更棒喔！

.horizontal-layout.flex {
    ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    li {
        flex-shrink: 0;
        flex-basis: 90px;
    }
}

关于“css如何实现横向布局”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。