无序列表li横向排列

一、横向两列方式排列：

在网页中，很多地方都会用到无序列表横向排列的形式，通常的写法都是使得li的css样式设置为:float：left的形式即可，li会依次从最左边开始并列对齐，

例如：

HTML中：

 <ul class="ui">

     <li><a href="#" >首页</a></li>

     <li><a href="#">登录</a></li>

     <li><a href="#">注册</a></li>

     <li><a href="#">服务大厅</a></li>

     <li><a href="#">需求大厅</a></li>

 </ul>

CSS:

    .ui{

                  width:700px;

                  height:50px;

                  list-style: none;

                  margin:;

                  padding:;

              }

         .ui li{

             width:70px;
               margin:0 10px;

             float: left;/*该处换为display:inline-block;同样效果*/

         }

         .ui li a{

             width:70px;

             height:50px;

             padding:0 20px;

             font-size: 12px;

             line-height:50px;

             background: red;

             display: inline-block;

         }

显示结果：

但是在有些情况下需要列表以两列的形式分开并列一行，

此时，可以有以下两种方式来布局：

方法一：

当设置li的属性为：display:inline-block时:

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

         .ui{

                  width:700px;

                  height:50px;

                  list-style: none;

                  margin:0;

                  padding:0;

              }

         .ui li{

             width:70px;

            display: inline-block;

            margin:0 10px;

         }

         .ui li a{

             width:70px;

             height:50px;

             padding:0 20px;

             font-size: 12px;

             line-height:50px;

             background: red;

             display: inline-block;

         }

         .right{

             float: right;

             width:70px;

         }

     </style>

 </head>

 <body>

 <ul class="ui">

     <li><a href="#" >首页</a></li>

     <li><a href="#">登录</a></li>

     <li><a href="#">注册</a></li>

     <li class="right"><a href="#">服务大厅</a></li>

     <li class="right"><a href="#">需求大厅</a></li>

 </ul>

 </body>

 </html>

方法二：

利用id增加权重使想要浮动在右边的li有float：right属性;

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <style type="text/css">

         .ui{

                  width:700px;

                  height:50px;

                  list-style: none;

                  margin:0;

                  padding:0;

              }

         .ui li{

             width:70px;

            display: inline-block;

            margin:0 10px;

         }

         .ui li a{

             width:70px;

             height:50px;

             padding:0 20px;

             font-size: 12px;

             line-height:50px;

             background: red;

             display: inline-block;

         }

         #rr,#re{

             float: right;

         }

     </style>

 </head>

 <body>

 <ul class="ui">

     <li><a href="#" >首页</a></li>

     <li><a href="#">登录</a></li>

     <li><a href="#">注册</a></li>

     <li id="rr"><a href="#">服务大厅</a></li>

     <li id="re"><a href="#">需求大厅</a></li>

 </ul>

 </body>

 </html>

最后，需要注意的是，在浮动的时候，最后的结果与正常部分两列的情况下的顺序有所不同，例如

上面的结果正常是：“首页”到“需求大厅”依次排列，但是在浮动之后却变成了“服务大厅”是最后一

个，是因为在“服务大厅”右浮动时，它已经将区域最右侧占据，当下一个元素“需求大厅”再右浮动时，

由于最右侧已经被签一个占据，所以它只有在签一个元素的左侧，因此，顺序会是倒序的。就是说如

果用left对ABCDE排列，那么用right之后结果就会变成：EDCBA。

二、在固定宽度下有间隔的排列

在外围区域宽度固定的情况下，要想使ul中的li内容有一定间隔的横向排列，只要不设置在x方向上

的overflow:hidden;而整个ul为：margin-right:-12px（12随内容而定），如下：

HTML中：

 <div class="grid">

     <div class="ui-relative">

     <ul class="ui-ul">

         <li>

             <div class="pic"><a href="#"><img src="  http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>

             <h3>

                 <a href="#" class="tit">猪八戒</a>

             </h3>

             <div class="txt">TA 出售的服务(好评率99.51%)</div>

         </li>

         <li>

             <div class="pic"><a href="#"><img src="  http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>

             <h3>

                 <a href="#" class="tit">猪八戒</a>

             </h3>

             <div class="txt">TA 出售的服务(好评率99.51%)</div>

         </li>

         <li>

             <div class="pic"><a href="#"><img src="  http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>

             <h3>

                 <a href="#" class="tit">猪八戒</a>

             </h3>

             <div class="txt">TA 出售的服务(好评率99.51%)</div>

         </li>

     </ul>

     </div>

 </div>

CSS:

   .grid{

           width:1100px;

           margin:0 auto;

            }

         .ui-ul{

             height:auto;

             overflow-y: hidden;;

            list-style: none;

            margin-right:-15px;

             margin-left:0;

             padding:0;

         }

         .ui-ul li{

             width:320px;

             height:120px;

             padding:15px;

             float: left;

             border:1px solid #ccc;

             margin-right:15px;

         }

         .pic{

             width:120px;

             height:120px;

             margin-right:10px;

             float: left;

         }

 .pic img{

     width:120px;

     height:120px;

 }

 .txt{

     font-size: 12px;

 }

 .ui-relative{

     position: relative;

 }

结果为：

无序列表li横向排列的更多相关文章

无序列表li横向排列的间隙问题
今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙. 如: 将列表项li变成列表块后(即将li标签设置为,display:inline-block后), ...
ul li横向排列及圆点处理
如何用CSS制作横向菜单让ul li横向排列及圆点处理第一步:建立一个无序列表我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...
CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
android中RecyclerView控件的列表项横向排列
本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...
解决ul的li横向排列换行的问题
1. 问题现象先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...
菜单制作:ul li横向排列
CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

随机推荐

概述struts，以及struts如何实现MVC架构的
概述MVC体系结构? 答:MVC包括三类对象,model是应用对象,view是视图,controller是控制器,它定义用户界面对用户输入的响应方式. 在MVC体系中,模型通常被称为”业务逻辑”,是真 ...
struts2中css，js等资源无效非路径问题（新手问题）
一个小小的Strust2例子然后发现css,js,图片用不了,debugger下发现无法访问这些资源(404错误),妈的,那个例子明明可以的,起码从书上的图片看. 发现是web.xml中的过滤器的问 ...
POJ 3709 K-Anonymous Sequence（斜率优化DP）
[题目链接] http://poj.org/problem?id=3709 [题目大意] 给出一个长度为n个非严格单调递增数列,每次操作可以使得其中任意一项减一, 问现在使得数列中每项数相同的数的数量 ...
【概率dp】Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) D. Jon and Orbs
直接暴力dp就行……f(i,j)表示前i天集齐j种类的可能性.不超过10000天就能满足要求. #include<cstdio> using namespace std; #define ...
Exercise01_11
public class Population{ public static void main(String[] args){ int sum,s; s=365*5*24*60*60; sum=31 ...
Problem Z: 零起点学算法22——求正弦和余弦
#include<stdio.h> #include <math.h> int main() { int n; ); double a,b; while(scanf(" ...
iOS开发——使用Autolayout生成动态高度的TableViewCell单元格
步骤一.TableViewCell中使用Autolayout 要点:Cell的高度必须在Constraints中指明,但不能定死,需要让内部由内容决定高度的View决定动态高度. 如UILabel设置 ...
linux-文件中行按照出现次数多少排序
cat sorttest | sort | uniq -c | sort -k1 sorttest内容如下:
ArcMap绘图时，节点显示时的小数点位数
直接来图吧,省的啰嗦了: 打开选中节点的,节点坐标列表(Edit Sketch Properties):
Python+C混编
Python最慢!C最快!Python+C混编?结果可想而知! 樱桃种子百家号04-1712:11 共享库使用C语言编译产生共享库,然后python使用ctype库里的cdll来打开共享库. 举例 ...

无序列表li横向排列

无序列表li横向排列的更多相关文章

随机推荐

热门专题