box-sizing flex

来源：互联网发布：矢量数据的概念编辑：程序博客网时间：2024/06/03 17:54

<ul class="list1">    <li class="li1">例子1</li>    <li class="li1">例子1</li>    <li class="li1">例子1</li>    <li class="li1">例子1</li></ul><div style="clear: both"></div><ul class="list2">    <li class="li2">例子2</li>    <li class="li2">例子2</li>    <li class="li2">例子2</li>    <li class="li2">例子2</li></ul><ul class="list3">    <li class="li3">例子3</li>    <li class="li3">例子3</li>    <li class="li3">例子3</li>    <li class="li3">例子3</li></ul>
ul{    list-style: none;    width: 100%;    margin: auto;}    .li1{        float: left;        background: red;        width: 25%;        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;        border: 3px solid #000000;        text-align: center;    }    .list2{        display: flex;    }    .li2{        flex: 1;        text-align: center;    }    .list3{        display: flex;        justify-content: space-around;    }
运行结果

阅读全文

0 0