css如何设超出屏幕宽度可以滑动

问题描述

问 题

css:
.product-status{

        width: 100%;
        height: 2.611111rem;
        overflow-x: scroll;
        font-size: 0.722222rem;
        border-bottom: 2px solid #F2F2F2;
        border-top: 2px solid #F2F2F2;
    }
    .product-status div{
        /*display: inline-block;*/
        float: left;
        margin-left: 0.666666rem;
        margin-right: 0.666666rem;
    }
    .product-status div span{
        display: inline-block;
        margin-bottom: 0.333333rem;
    }
    
  html:
  <div class="product-status">
    <div><span>育种</span></div>
    <div><span>播种</span></div>
    <div><span>发芽</span></div>
    <div><span>除草</span></div>
    <div><span>施肥</span></div>
    <div><span>开花</span></div>
    <div><span>挂果</span></div>
    <div><span>其他</span></div>
</div>  

我这里设置了overflow-x: scroll;可是为啥还是会换行?如果我设置了overflow-y: hidden;的话就动不了了,就是宽度不能滑动?为什么?哪里出了问题?
    

解决方案

因为你里面的div设置了浮动，所以会换行，
你设置浮动后 div会脱离正常的文档流，所以你想要横向滚动的效果并没有出现,float简单来说你是想自适应，滚动的话就是固定布局了，这点你的设计比较矛盾。
如果float不是为了自适应，就取消浮动用下面的方法：
为了能设置栏目宽高达到间距效果，可以去除div层直接将span设置为display：inline-block，你这段代码的语义其实并不好，建议用列表ol、ul实现，逻辑更清晰一些。

<style>
    .com{
        width: 100%;
        border: 1px solid #000;
    }
    .com ul{
        width: auto;
        overflow-x: auto;
        white-space: nowrap;
    }
    .com li{
        display: inline-block;
        width: 300px;
        height: 50px;
        border: 1px solid red;
    }
</style>


<div class="com">
    <ul>
        <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>0</li>
    </ul>
</div>

这篇关于css如何设超出屏幕宽度可以滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！