精华内容
下载资源
问答
  • 无序列表li横向排列

    千次阅读 2020-01-02 12:50:45
    在网页中,很多地方都会用到无序列表横向排列的形式,通常的写法都是使得li的css样式设置为:float:left的形式即可,li会依次从最左边开始并列对齐, 例如: HTML中: 1 <ul class="ui"...
    本文转载自:
    https://www.cnblogs.com/laogai/p/3406073.html  作者:laogai 转载请注明该声明。
    

    一、横向两列方式排列:

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

    例如:

    HTML中:

    1 <ul class="ui">
    2     <li><a href="#" >首页</a></li>
    3     <li><a href="#">登录</a></li>
    4     <li><a href="#">注册</a></li>
    5     <li><a href="#">服务大厅</a></li>
    6     <li><a href="#">需求大厅</a></li>
    7 </ul>

    CSS:

     1    .ui{
     2                  width:700px;
     3                  height:50px;
     4                  list-style: none;
     5                  margin:0;
     6                  padding:0;
     7              }
     8         .ui li{
     9             width:70px;
    margin:0 10px; 10 float: left;/*该处换为display:inline-block;同样效果*/
    11
    12 } 13 14 .ui li a{ 15 width:70px; 16 height:50px; 17 padding:0 20px; 18 font-size: 12px; 19 line-height:50px; 20 background: red; 21 display: inline-block; 22 }

    显示结果:

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

    此时,可以有以下两种方式来布局:

    方法一:

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6         .ui{
     7                  width:700px;
     8                  height:50px;
     9                  list-style: none;
    10                  margin:0;
    11                  padding:0;
    12              }
    13         .ui li{
    14             width:70px;
    15            display: inline-block;
    16            margin:0 10px;
    17         }
    18 
    19         .ui li a{
    20             width:70px;
    21             height:50px;
    22             padding:0 20px;
    23             font-size: 12px;
    24             line-height:50px;
    25             background: red;
    26             display: inline-block;
    27         }
    28         .right{
    29             float: right;
    30             width:70px;
    31         }
    32 
    33     </style>
    34 </head>
    35 <body>
    36 <ul class="ui">
    37     <li><a href="#" >首页</a></li>
    38     <li><a href="#">登录</a></li>
    39     <li><a href="#">注册</a></li>
    40     <li class="right"><a href="#">服务大厅</a></li>
    41     <li class="right"><a href="#">需求大厅</a></li>
    42 </ul>
    43 </body>
    44 </html>

    方法二:

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

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <style type="text/css">
     6         .ui{
     7                  width:700px;
     8                  height:50px;
     9                  list-style: none;
    10                  margin:0;
    11                  padding:0;
    12              }
    13         .ui li{
    14             width:70px;
    15            display: inline-block;
    16            margin:0 10px;
    17         }
    18 
    19         .ui li a{
    20             width:70px;
    21             height:50px;
    22             padding:0 20px;
    23             font-size: 12px;
    24             line-height:50px;
    25             background: red;
    26             display: inline-block;
    27         }
    28         #rr,#re{
    29             float: right;
    30         }
    31 
    32     </style>
    33 </head>
    34 <body>
    35 <ul class="ui">
    36     <li><a href="#" >首页</a></li>
    37     <li><a href="#">登录</a></li>
    38     <li><a href="#">注册</a></li>
    39     <li id="rr"><a href="#">服务大厅</a></li>
    40     <li id="re"><a href="#">需求大厅</a></li>
    41 </ul>
    42 </body>
    43 </html>

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

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

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

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

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

     

     

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

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

    的overflow:hidden;而整个ul为:margin-right:-12px(12随内容而定),如下:

    HTML中:

     1 <div class="grid">
     2     <div class="ui-relative">
     3     <ul class="ui-ul">
     4         <li>
     5             <div class="pic"><a href="#"><img src="  http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>
     6             <h3>
     7                 <a href="#" class="tit">猪八戒</a>
     8             </h3>
     9             <div class="txt">TA 出售的服务(好评率99.51%)</div>
    10         </li>
    11         <li>
    12             <div class="pic"><a href="#"><img src="  http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>
    13             <h3>
    14                 <a href="#" class="tit">猪八戒</a>
    15             </h3>
    16             <div class="txt">TA 出售的服务(好评率99.51%)</div>
    17         </li>
    18         <li>
    19             <div class="pic"><a href="#"><img src="  http://p6.zbjimg.com//user_avat_new/007/16/31/200x200_avatar_10.jpg"></a></div>
    20             <h3>
    21                 <a href="#" class="tit">猪八戒</a>
    22             </h3>
    23             <div class="txt">TA 出售的服务(好评率99.51%)</div>
    24         </li>
    25     </ul>
    26     </div>
    27 </div>

    CSS:

     1   .grid{
     2           width:1100px;
     3           margin:0 auto;
     4            }
     5         .ui-ul{
     6             height:auto;
     7             overflow-y: hidden;;
     8            list-style: none;
     9            margin-right:-15px;
    10             margin-left:0;
    11             padding:0;
    12         }
    13         .ui-ul li{
    14             width:320px;
    15             height:120px;
    16             padding:15px;
    17             float: left;
    18             border:1px solid #ccc;
    19             margin-right:15px;
    20         }
    21         .pic{
    22             width:120px;
    23             height:120px;
    24             margin-right:10px;
    25             float: left;
    26         }
    27 .pic img{
    28     width:120px;
    29     height:120px;
    30 }
    31 .txt{
    32     font-size: 12px;
    33 }
    34 
    35 .ui-relative{
    36     position: relative;
    37 }

    结果为:

     

     

    展开全文
  • 无序列表li横向排列的间隙问题

    千次阅读 2017-07-02 21:14:00
    今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙。  如:    将列表项li变成列表块后(即将li标签设置为,display:inline-block后),会变成这样,中间会...

      今天在写页面的时候,无意中遇到这样一个问题,就是无序列表li横向排列即做成导航栏时,列表项间有间隙。

      如:

      

      将列表项li变成列表块后(即将li标签设置为,display:inline-block后),会变成这样,中间会有间隙。

      

      即便是将外边距、内边距都设为0后,还是有间隙。在调试了很久,还是没法解决这个问题,最后我改变了一下li的位置,结果可以了。我是这样做的。

      

      改变li的位置后,结果如下:

      

      好,问题成功解决了。不知园友们还有没有其他的好办法,欢迎指教。

     

    转载于:https://www.cnblogs.com/jf-67/p/7107251.html

    展开全文
  • 如何将无序列表横向排序

    千次阅读 2018-09-18 21:15:48
    大多数百度得来的答案都不知道为啥说一定要float一下才可以...那么可以用一个无序列表来表示,先写一个nav标签内部包含一个无序列表,颜色背景等css略。 ul{ list-style-type:none; //删除无序列表的项目符号 } u...

    大多数百度得来的答案都不知道为啥说一定要float一下才可以,不理解这种回答。(尝试过这种办法,可以是可以,但是字都粘连在一块了,很难解决。)

    我在书中获得了一种解决办法:

    例如我们现在要创建一个导航栏

    那么可以用一个无序列表来表示,先写一个nav标签内部包含一个无序列表,颜色背景等css略。

    ul{
        list-style-type:none; //删除无序列表的项目符号
    }
    ul li{
        display:inline;  //横向排序
    }

    最后这个列表就成为横向的了,而且没有粘连在一块这种问题。另外如果按照大多数百度的办法,我还没有办法解释为何背景颜色不能改变。

    展开全文
  • 无序列表横向显示两种方法

    千次阅读 2018-09-10 21:57:51
    注释 1 ...  <!--[if IE 9]> ...虽然可以横向显示,但无序列表的宽度和高度值将不起作用了,即如果li设置值将不起作用,因为display: inline是行内样式。 Html如何设置元素水平居中? 可参考 ...

    注释

    1HTML中条件注释:
       <!--[if IE 9]>
            .... some HTML here ....
       <![endif]-->
       条件注释定义只有 Internet Explorer 执行的 HTML 标签。
    2过多的JavaScript注释会降低JavaScript的执行速度与加载速度,因此应在发布网站时,去掉JavaScript注释。
    注释块(/* ... */)中不能有(/*或*/,JavaScript正则表达式中可能产生这种代码),这样会产生语法错误

    display

    1

    display:block;

    就是将元素显示为块级元素.

    block元素的特点是:
    总是在新行上开始;
    高度,行高以及顶和底边距都可控制;
    宽度缺省是它的容器的100%,除非设定一个宽度
    <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。
    2

    display:inline;

    就是将元素显示为行内元素.

    inline元素的特点是:
    和其他元素都在一行上;
    高,行高及顶和底边距不可改变;
    宽度就是它的文字或图片的宽度,不可改变。
    <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
    3display:inline-block;应用此特性的元素呈现为内联对象,周围元素保持在同一行,但可以设置宽度和高度地块元素的属性

    无序列表横向显示方法:

    1float:left;如果无序列表有外边距,即有maring值,则 float:left和display: inline同时用,不然浏览器兼容性会出问题,IE6外边距会加倍
    2display: inline;虽然可以横向显示,但无序列表的宽度和高度值将不起作用了,即如果li设置值将不起作用,因为display: inline是行内样式。

    Html如何设置元素水平居中?

    可参考https://jingyan.baidu.com/article/3c343ff7f22c930d377963b5.html

    CSS设置如下可实现上图中箭头背景图片效果:

    span{

    background:url(img/up.png) no-repeat 0 0;

    padding-left:18px;

    }

    展开全文
  • 无标题文档 <!-- *{ margin:0; padding:0; list-style:none; text-decoration:none; } #dh { height: 30px; width: 600px; margin-top: 0px; margin-right: auto; margin-bottom: 0px;... b
  • 无序标签横向排列

    2021-10-04 01:31:22
    相信很多刚开始学习前端的小伙伴都遇到过无序标签横向排列的时候最后一个盒子总会因为加边距而掉到第二行显示的问题吧?这篇文章我就来教大家解决这么问题! html代码如下: <div class="box"> <ul class=...
  • 首先建立一个无序列表 <html> <body> <div id='item'> <ul> <li>星期一</li> <li>星期二</li> <li>星期三</li> <li>星期四<...
  • 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构。代码是:<ul> <li><a href="1">首页</a></...
  • 不同字符会导致空的不到位 具体看图 ... 以下为设置的css .d1-2 ul{<!-- -->  list-style-image: url(../img/background.png);  clear: both;  font-size: 14px;... </p>
  • -- 无序列表纵向变横向 --> 夏枯草 干地黄 苍耳 山豆根 大黄 山葡萄 大枣 栗 <!-- end : demo --> <!-- NO.1 加载框架依赖的jQuery文件(压缩版),版本是1.12.4 --> ...
  • /*设置属性列表前面没点*/ } .a3{ width:100px; height:30px; border:thin dotted #6F9;/*设置的边框*/ text-align:center; background-image:url(images/pink.png);/*设置的背景*/ float:left;
  • 无序列表实现纵向和横向菜单

    千次阅读 2015-12-11 12:34:48
    无序列表UL在网页中除显示树状结构外,最常用的用途就是作为导航栏的菜单使用,而它的样式通过CSS来设定,这种把样式与数据分离的做法既能有丰富多彩的效果,又易于变换,值得好好研究一下。 无序列表的默认效果 ...
  • 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构。代码是: 首页 产品介绍 服务介绍 技术支持 立刻购买 联系...
  • 怎么设在html中无序列表之间的距离

    千次阅读 2014-04-20 23:24:38
    增加行距显示
  • CSS列表有序列表无序列表无序列表去掉点成行显示 有序列表 有序列表顾名思义就是会对列表排序 例如这样↓ 1.第一句 2.第二句 3.第三句 <ol> <li>第一句</li> <li>第二句</li> &...
  • PAGE / NUMPAGES 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 ? 我们先建立一个无序列表来建立强化美术培训学校导航菜单的结构代码是 <div class="test<ul> 首 页资料个人收集整理勿做商业用途 ...
  • css+div横向排列自动换行 - Kaiqisan

    千次阅读 2020-09-26 12:18:46
    我是Kaiqisan,是一个不善言辞的羞射男孩,在我们使用div+css布局的时候,由于div是块级元素,在排列的时候总是会自动换行。现在有一个需求就是要能自动换行。 <div class="main"> <div class="block">&...
  • 今天做网页是老是不懂怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,做个笔记: 复制代码代码如下: #ul { float:left; } #ul li { float:left; list-style:none; } 顺便拓展一下li的list-style: ...
  • 图片横向排列的方法

    千次阅读 2019-11-08 14:48:57
    /*大多数用在无序列表中*/ float:left /*设置弹性盒*/ display: flex; /*当内容在一行容不下时不换行*/ flex-wrap: nowrap; /*将块级元素变为行级元素*/ display:inline 或者 display:inline-block ...
  • HTML中的标签中li横向排列

    万次阅读 2017-06-02 12:35:45
    第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 Baidu.Com Code52.Net Yahoo.Com Google.Com 第二步、编写CSS代码 1、设置公共样式 请将以下CSS代码添加到HTML文档的...标签...
  • WPF ListBox 横向排列

    千次阅读 2018-11-09 01:57:27
    WPF ListBox 横向排列
  • ![图片说明](https://img-ask.csdn.net/upload/201609/20/1474359905_660217.png) 如图,点击左侧,右侧跟着变动的无序列表
  • 无序列表制作横向导航

    千次阅读 2007-05-10 19:02:00
    关于导航栏,就是导航横向排列中间用竖线分割的那种,我所见的做法有4种了。最简单的也是以前最常用的是栏目1 | 栏目2 | 栏目3 这种。自从div+css爆发开始,很多导航都采用无序列表这种方式了。据说这种方式有N多...
  • 列表主要有三种类型: 有序列表无序列表和描述列表 。 人们将从这些类型中选择一种,并开始为他们要以排列形式显示的元素创建一个列表。 Problem: 问题: Lists generally come with numbering, bullets and ...
  • ``` <title></title> *{margin:0;padding:0;} h3{color:red;} img{border:red;width:100px;height:100px;padding:0 20px} #ul1{list-style-type:none;text-align:center;...怎么实现文字在图片下方

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,994
精华内容 1,197
关键字:

无序列表横向排列