【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
