讓ul中浮動的最后一個li元素不在被擠下來

本文轉載自查看原文 2018-06-29 15:36 1869 css

記不清自己有多少次寫浮動的 li 時最后一個 li 標簽被擠掉下一行。導致的原因很簡單，就是父盒子給的寬度太小了，今天偷來空總結總結處理辦法。

情景模擬：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            margin: 100px;
            width: 700px;
            height: 100px;
            background-color: #c8d4db;
        }
        .box1 ul {
            list-style: none;
        }
        .box1 li {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 1px;
            background-color: #48484c;
        }
        .box1 li:hover {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

父盒子是700px的寬，每一個li是100px的寬+1px的margin-right，由於700px<(100+1)*7，所以最后一個 li 被擠了下來。

解決辦法1：

直接給li的父親ul加具體寬，而且ul的寬要大於所有li寬度（包括margin,padding）之和，width : 707px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    不管父盒子是不是浮動的：【不想超過父盒子邊，可以給父盒子加overflow：hidden】，擴大ul的寬度，這樣最后一個li
    就不會被擠下去，而且每個li直接又留出了空隙。
    父盒子的寬度還是700px，每一個li都是100px寬。【加overflow：hidden后，最后一個li的寬度明顯沒有100px，整整減小了6px】
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            margin: 100px;
            width: 700px;
            height: 100px;
            /*overflow: hidden;*/
            background-color: #a83c3a;
        }
        .box1 ul {
            width: 707px;
            list-style: none;
        }
        .box1 li {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 1px;
            background-color: #48484c;
        }
        .box1 li:hover {
            background-color: #c43c35;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

解決辦法2：

給li的父親ul加 width:500%;_width:400%;百分之幾百是相對於100%來說的，如果你寫200%，意思代表寬度變為原來寬度的兩倍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    不管父盒子是不是浮動的：將ul的寬度設置為500%，最后一個li
    不會被擠下去，而且每個li都留出了空隙。
    父盒子的寬度還是700px，每一個li都是100px寬。【加overflow：hidden后，最后一個li的寬度明顯沒有100px，整整減小了6px】
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            margin: 100px;
            width: 700px;
            height: 100px;
            /*overflow: hidden;*/
            background-color: #a83c3a;
        }
        .box1 ul {
            width: 500%;
            _width: 400%;
            list-style: none;
        }
        .box1 li {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 1px;
            background-color: #48484c;
        }
        .box1 li:hover {
            background-color: #c43c35;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

測試浮動情形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
    不管父盒子是不是浮動的：可以看到不管是直接使用ul width:707px還是width：500%都是可行的
        與父盒子浮動不浮動無關。
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            margin: 100px;
            width: 700px;
            height: 100px;
        }
        .box2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .box3 {
            /* 首先父盒子要有寬子盒子才能用500% */
            width: 600px;
            float: right;
        }
        .box3 ul {
            width: 607px;
            list-style: none;
        }
        .box3 li {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 1px;
            background-color: #48484c;
        }
        li:hover {
            background-color: #c43c35;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">

        </div>
        <div class="box3">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
               <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

並不一定是使用width:500%，也可能是102%或200%或其他，這要根據你具體需要多寬，你可以設置的盡可能大一些：

比如下面一個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未壓蓋效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            margin: 100px;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        ul {
            /*width: 304px;*/
            width: 101%;
            list-style: none;
        }
        li.box2 {
            float: left;
            width: 100px;
            height: 150px;
            margin-left: -1px;
            margin-top: -1px;
            background-color: #c0a16b;
            border: 1px solid black;
        }
        .box2:hover {
            background-color: #a83c3a;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li class="box2"></li>
            <li class="box2"></li>
            <li class="box2"></li>
            <li class="box2"></li>
            <li class="box2"></li>
            <li class="box2"></li>
        </ul>
    </div>
</body>
</html>