css如何實(shí)現(xiàn)橫向布局

這篇文章將為大家詳細(xì)講解有關(guān)css如何實(shí)現(xiàn)橫向布局，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

橫向布局

橫向布局指容器內(nèi)節(jié)點(diǎn)以水平方向排列且溢出部分被隱藏的占位布局。豎向布局很常見，聲明overflow:hidden;width:xpx;height:ypx就能實(shí)現(xiàn)，但橫向布局卻不能使用類似方式實(shí)現(xiàn)。

為了方便使用多種方式實(shí)現(xiàn)橫向布局，以下將通用代碼拆分出來。

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

有些同學(xué)可能會使用行內(nèi)元素實(shí)現(xiàn)橫向排版，但必須聲明overflow-y:hidden使容器在Y軸方向隱藏溢出部分。由于行內(nèi)元素在當(dāng)前行排版產(chǎn)生溢出會自動將其余節(jié)點(diǎn)排版到下一行，因此還需聲明white-space:nowrap使所有行內(nèi)元素在一行內(nèi)排版完畢。若產(chǎn)生滾動條，還需對容器的height做適當(dāng)?shù)奈⒄{(diào)。

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

上述方式在筆者在開發(fā)認(rèn)知里覺得太繁瑣，實(shí)質(zhì)上將所有節(jié)點(diǎn)當(dāng)成文本排列，也是醉了。筆者推薦使用flex布局完成上述布局，flex布局作為目前最常見的布局方式，相信也不用筆者多說。以下實(shí)現(xiàn)方式不知大家是否見過呢？在移動端上體驗(yàn)會更棒喔！

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

關(guān)于“css如何實(shí)現(xiàn)橫向布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。