由overflow-x:scroll產生的收穫

時間 2019-12-11

標籤 overflow scroll 產生收穫简体版

原文原文鏈接

咱們都知道float：left屬性會讓元素向左浮動，若是用一個div將幾個左浮動的li包起來，是否是div的寬度被li撐得很長很長呢，代碼：html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            
            ul {
                border: 1px solid #1FC195;
                list-style: none;
                margin: 0;
                padding: 0;
                background-color: #CCCCCC;
            }
            
            ul li {
                padding: 0;
                margin: 0;
                float: left;
                width: 300px;
                height: 600px;
                background: #8FBC8F;
                margin: 5px;
            }
        </style>
    </head>

    <body>
        <div class="over-x">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test3</li>
                <li>test3</li>
                <li>test3</li>
                <li>test3</li>
            </ul>
        </div>
    </body>

</html>

可是實際的顯示效果倒是：spa

能夠看見div的寬度不是被div撐得很長，二是直接換行了，code

由此對float：left屬性進行了一些總結：當給元素用了float屬性，元素會自動尋找最近一級的父級的寬度，當這個父級的寬度不能知足li全部的寬度和以後就會排到第二行，若是給這個父級足夠的寬度以後（一個>=li總和的寬度）便能實現該效果htm

這時候要是給那個父級增長一個父級（這個父級給一個較小的寬度，而且設置overflow-x:scroll）即可以再水平方向出現滾動條blog

代碼：it

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        .over-x{
            width:600px;
            overflow:scroll ;
        }
            ul{
                border: 1px solid #1FC195;
                list-style: none;
                margin: 0;
                padding: 0;
                background-color: #CCCCCC;
                overflow-x: scroll;
                overflow-y: hidden;
                height: 610px;
                width:19000px
            }
            ul li{
                padding: 0;
                margin: 0;
                float: left;
                width: 300px;
                height: 600px;
                background: #8FBC8F;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="over-x">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li><li>test3</li><li>test3</li><li>test3</li><li>test3</li>
            </ul>
        </div>
    </body>
</html>

效果class

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。