ul-li模拟table布局，实现每个li等高

作者: Zalman1 | 来源:发表于2020-03-20 18:09 被阅读0次

ul-li模拟table布局，实现每个li等高
css常用布局总结
html+css小结
等分布局
页面布局之两列等高布局
<ul>新闻信息列表
css实现等高布局
利用display:table-cell实现等高布局
Lua单继承与多继承理解
CSS--table-cell的特性

float布局时，所有li是一行，内容不固定时，高度不等。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div {
                border: 1px solid green;
                padding: 10px;
                margin: 10px;
            }
            ul {
                overflow: hidden;
            }
            ul li {
                float: left;
                width: 100px;
                border: 1px solid red;
                word-break: break-all;
                text-align: center;
                list-style: none;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>111111111111111111111111111111111111111111111111111111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
            </ul>
        </div>
    </body>
</html>

image.png

table布局时，所有li是一行，内容不一样时，高度一样。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                display: table;
                border: 1px solid green;
                padding: 10px;
                margin: 10px;
            }
            ul{
                display: table-row;
            }
            ul li{
                display: table-cell;
                width: 100px;
                border: 1px solid red;
                word-break:break-all;
                text-align: center;
                list-style: none;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>111111111111111111111111111111111111111111111111111111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
            </ul>
        </div>
    </body>
</html>

image.png