【CSS】＜li＞水平排列且居中显示

最新推荐文章于 2024-04-26 16:52:43 发布

绿豆汤海域

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_53079458/article/details/134604579

版权

CSS 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

目标：

实现<li>水平方向排列
所有的<li>能够居中显示

方法一：行内块元素布局

<li>本身是块元素，独占父盒子一行，将其改为行内块元素(inline-block)，实现水平方向排列。
设置父盒子<ul>text-align:center，实现居中。

问题：行内块元素之间会出现缝隙，解决指路👉HTML内联（行内）元素间的缝隙问题讲解

方法二：float布局

利用float实现<li>水平方向排列
父盒子<ul>清除浮动后给定与内部元素一样的高度，利用margin: 0 auto 实现居中

问题：float会引起父元素高度塌陷，需要给父元素清除浮动；并且需要将父元素宽度设置为子元素的宽度，不灵活。【不推荐】

方法三：flex布局

利用默认主轴方向为横向实现<li>水平方向排列
利用justify-content:center实现居中

代码

HTML

<body>
    <!-- 方法一 -->
    <div class="box box1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <!-- 方法二 -->
    <div class="box box2">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <!-- 方法三 -->
    <div class="box box3">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>

CSS

    <style>
        /* 初始化 */
        * {
            margin: 0;
            padding: 0;
            /* 去除li的圆点 */
            list-style-type: none;
        }

        .box {
            margin: 50px auto;
            width: 500px;
            height: 100px;
            border: 1px solid purple;
        }

        /* 方法一. li转换为行内块元素 */
        .box1 ul {
            /*设置 块元素 或者 单元格框的行内内容 水平对齐 */
            text-align: center;
            /* 解决行内块元素之间有缝隙的问题 */
            font-size: 0;

            /* 可视化块 */
            background-color: pink;
        }

        .box1 li {
            /* 转化为行内块元素 */
            display: inline-block;
            /* 解决行内块元素之间有缝隙的问题 */
            font-size: 16px;

            /* 可视化块 */
            background-color: aqua;
        }

        /* 方法二. float布局 */
        .box2 ul {
            /* 给定与内部元素一样的宽度 */
            width: 25px;
            margin: 0 auto;
            /* 清除浮动，让内部浮动元素能够撑开盒子 */
            overflow: hidden;

            /* 可视化块 */
            background-color: yellow;
        }

        .box2 li {
            float: left;
            /* 可视化块 */
            background-color: aqua;
        }

        /* 方法三. flex布局 */
        .box3 ul {
            display: flex;
            /* 默认主轴方向为横向 */
            flex-direction: row;
            justify-content: center;

            /* 可视化块 */
            background-color: blue;
        }

        .box3 li {
            /* 可视化块 */
            background-color: aqua;
        }
</style>

页面效果