html ul li 横排居中排列

最新推荐文章于 2025-03-02 15:57:10 发布

是人非人的人

最新推荐文章于 2025-03-02 15:57:10 发布

阅读量1.9w

点赞数 5

分类专栏：前端文章标签： ul li 居中横排 flex横排

本文链接：https://blog.csdn.net/hu_feng903/article/details/81156586

版权

前端专栏收录该内容

17 篇文章

订阅专栏

ul li 横排有很多方法，可以使用float，这里使用的flex方式。
具体查看代码和运行效果图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ul li 横排居中</title>
    <style type="text/css">
        ul {
            display: flex;
            /*flex-direction: row;*/
            /*flex-wrap: nowrap;*/
            flex-flow: row nowrap;
            justify-content: center;
        }
        ul li {
            list-style: none;
            border: 2px solid #161EE8FF;
            text-align: center;
            line-height: 30px;
            padding: 10px;
            height: 30px;
            width: 100px;
            margin: 0 10px;
        }
    </style>
</head>
<body>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>
</body>
</html>