【CSS】怎样使ul/li制作的水平方向的菜单/按钮/链接组 靠左/居中/靠右显示

CSS网文的一大毛病是只有代码没有图，这咋可以呢？！所以在这里我先上效果图，还为了大家看清特地保留了div的边框：

先说关键点，要让li水平排列，其display属性都应该是inline或是inline-block，下面的例子全用了inline-block;

要让li子项靠左，应该设置其float属性为left；居中或靠右时不要浮动（去掉float属性），设置父元素ul的text-align属性为center或right即可。

其它请大家自行查看代码。

再上html代码：

复制代码
<div class="container">
            <div class="topWrapper"> <!-- 靠左的五个li项 -->
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                </ul>
            </div>

            <div class="middleWrapper"> <!-- 居中的五个li项 -->
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>

            <div class="bottomWrapper"> <!-- 居右的五个li项 -->
                <ul>
                    <li>甲</li>
                    <li>乙</li>
                    <li>丙</li>
                    <li>丁</li>
                    <li>戊</li>
                </ul>
            </div>
        </div>
复制代码

再上CSS代码：

复制代码
.container{
            border:1px solid red;
            height:160px;            
            margin:0 auto;/*在父元素内居中常用方法*/
            width:640px;
        }
        .topWrapper{
            border:1px solid blue;
            height:40px;
            margin:0 0 10px 0;
        }
        .topWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .topWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            float:left;/*使自己靠左的关键属性*/
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .middleWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .middleWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:center;/*使子元素li居中的关键属性*/
        }
        .middleWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .bottomWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .bottomWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:right;/*使子元素li靠右的关键属性*/
        }
        .bottomWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 0 0 10px;
            text-align:center;
            width:40px;
        }
复制代码

最后是全体代码：

复制代码
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>标题</title>
     <style type="text/css">
     /*CSS样式*/
        .container{
            border:1px solid red;
            height:160px;            
            margin:0 auto;/*在父元素内居中常用方法*/
            width:640px;
        }
        .topWrapper{
            border:1px solid blue;
            height:40px;
            margin:0 0 10px 0;
        }
        .topWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
        }
        .topWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            float:left;/*使自己靠左的关键属性*/
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .middleWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .middleWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:center;/*使子元素li居中的关键属性*/
        }
        .middleWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 10px 0 0;
            text-align:center;
            width:40px;
        }

        .bottomWrapper{
            border:1px solid green;
            height:40px;
            margin:0 0 10px 0;
        }
        .bottomWrapper ul{
            list-style:none;
            margin:0;
            padding:0;
            text-align:right;/*使子元素li靠右的关键属性*/
        }
        .bottomWrapper ul li{
            background-color:#e6e6e6;
            border:1px solid gray;
            border-radius:8px;
            display:inline-block;
            height:40px;
            line-height:40px;
            margin:0 0 0 10px;
            text-align:center;
            width:40px;
        }
     </style>
    </head>

     <body>
        <div class="container">
            <div class="topWrapper"> <!-- 靠左的五个li项 -->
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                </ul>
            </div>

            <div class="middleWrapper"> <!-- 居中的五个li项 -->
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>

            <div class="bottomWrapper"> <!-- 居右的五个li项 -->
                <ul>
                    <li>甲</li>
                    <li>乙</li>
                    <li>丙</li>
                    <li>丁</li>
                    <li>戊</li>
                </ul>
            </div>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
    // 脚本
//-->
</script>
复制代码

PS：最上面的间距和下面两排明显不一样宽，不知原因为何，有人知道的话请留言。

END

posted @   逆火狂飙  阅读(1752)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
历史上的今天：
2013-11-25 XML,dom4j和Java
生当作人杰 死亦为鬼雄 至今思项羽 不肯过江东
点击右上角即可分享
微信分享提示