精华内容
下载资源
问答
  • 无序列表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;  //横向排序
    }

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

    展开全文
  • 无序列表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 }

    结果为:

     

     

    展开全文
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> ...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    *{
    	margin:0;
    	padding:0;
    	list-style:none;
    	text-decoration:none;
    	}
    #dh {
    	height: 30px;
    	width: 600px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	background-color: #F00;
    }
    #dh ul {
    	height: 30px;
    	width: 600px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    #dh ul li {
    	float: left;
    	list-style-type: none;
    	height: 30px;
    	width: 150px;
    	line-height: 30px;
    	text-align: center;
    }
    -->
    </style>
    </head>
    
    
    <body>
    <div id="dh">
    <ul>
    <li>首页</li>
    <li>电脑</li>
    <li>手机</li>
    <li>家电</li>
    </ul>
    </div>
    </body>
    </html>
    
    
    
    
    展开全文
  • 无序列表横向显示两种方法

    千次阅读 2018-09-10 21:57:51
    HTML中条件注释:  &lt;!--[if IE 9]&gt;  .... some HTML here ....  &lt;![endif]--&gt;  条件注释定义只有 Internet Explorer 执行的 HTML 标签。 2 过多的JavaScript...
  • 无序标签横向排列

    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>星期四<...
  •   内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1   ...DOCTYPE html> ...
  • /*设置属性列表前面没点*/ } .a3{ width:100px; height:30px; border:thin dotted #6F9;/*设置的边框*/ text-align:center; background-image:url(images/pink.png);/*设置的背景*/ float:left;
  • 不同字符会导致空的不到位 具体看图 ... 以下为设置的css .d1-2 ul{<!-- -->  list-style-image: url(../img/background.png);  clear: both;  font-size: 14px;... </p>
  • 怎么设在html无序列表之间的距离

    千次阅读 2014-04-20 23:24:38
    增加行距显示
  • HTML中的标签中li横向排列

    万次阅读 2017-06-02 12:35:45
    第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 Baidu.Com Code52.Net Yahoo.Com Google.Com 第二步、编写CSS代码 1、设置公共样式 请将以下CSS代码添加到HTML文档的...标签...
  • 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构。代码是:<ul> <li><a href="1">首页</a></...
  • css+div横向排列自动换行 - Kaiqisan

    千次阅读 2020-09-26 12:18:46
    我是Kaiqisan,是一个不善言辞的羞射男孩,在我们使用div+css布局的时候,由于div是块级元素,在排列的时候总是会自动换行。现在有一个需求就是要能自动换行。 <div class="main"> <div class="block">&...
  • ![图片说明](https://img-ask.csdn.net/upload/201609/20/1474359905_660217.png) 如图,点击左侧,右侧跟着变动的无序列表
  • 今天做网页是老是不懂怎么实现ul的横向排列和去掉li那个烦人的点,现在找到方法了,做个笔记: 复制代码代码如下: #ul { float:left; } #ul li { float:left; list-style:none; } 顺便拓展一下li的list-style: ...
  • CSS列表有序列表无序列表无序列表去掉点成行显示 有序列表 有序列表顾名思义就是会对列表排序 例如这样↓ 1.第一句 2.第二句 3.第三句 <ol> <li>第一句</li> <li>第二句</li> &...
  • 图片横向排列的方法

    千次阅读 2019-11-08 14:48:57
    /*大多数用在无序列表中*/ float:left /*设置弹性盒*/ display: flex; /*当内容在一行容不下时不换行*/ flex-wrap: nowrap; /*将块级元素变为行级元素*/ display:inline 或者 display:inline-block ...
  • 步骤4:我们将使用此属性和HTML 标记以及CSS属性list-style-type来省略无序列表中的项目符号。 Note: It is known that the usage of style attribute overrides any usage of style which is set globally. ...
  • WPF ListBox 横向排列

    千次阅读 2018-11-09 01:57:27
    WPF ListBox 横向排列
  • HTML 无序排列 有序排列 框架

    千次阅读 2015-05-11 21:58:38
    HTML 无序排列 有序排列 : 第四讲代码汇总 <!-- margin-left 对象左边外延边距 (margin-left:5px; 左边外延距离5px) margin-right 对象右边外延边距 (margin-right:5px; 右边外延距离5px) margin-top ...
  • <html> <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;} #ul1 li{display:...
  • 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构。代码是: 首页 产品介绍 服务介绍 技术支持 立刻购买 联系...
  • /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2011, 烟台大学... * All rights reserved. * 文件名称: 《列表——无序列表实现水平导航和垂直导航》  * 作 者: 刘江波  * 完成日
  • 网页简介: 协议地址 服务器IP 服务器端口号 资源名称 ...htttp(s):// 127.0.0.1 :80 index.html http有s的区别是以安全为目标的网页。 html是网页文件的后缀名。 代码介绍: 编码:charset = utf-8 gbk ...
  • Html 横排菜单不换行

    千次阅读 2018-05-21 12:32:17
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; #pic_list { display:block; white-space:nowrap; width:100%; overflow:auto; } #pic_list li { width:80px; height:80...

空空如也

空空如也

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

html无序列表横向排列