css li 不换行

最新推荐文章于 2021-08-04 02:38:59 发布
最新推荐文章于 2021-08-04 02:38:59 发布
阅读量166 收藏
点赞数
分类专栏： css 文章标签： css li ul
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sifeimeng/article/details/84500187
版权

转载：感觉写的挺见解的，借鉴过来，以备后用。

li 不换行

 

------

不换行的策略：

 

不换行原理：

ul 和 li 默认都是 display:block; 的标签，

可以通过2种方式实现 li 的 不换行显示：

* 将 li 设为 display:inline; ，然后通过 marging 和 padding 设置 li 的间距，

* 将 li 设为 float:left; ，然后通过 ( margin & padding ) 设置 li 的间距，通过 width 设置 li 宽度，可以指定 overflow:hidden 以防止内容过多撑开 li ，

 

ul 的设置：

ul 最好设置 margin & padding = 0，且 list-style 设置为 none，以不显示前面的符号，

例子：

.ul_one {list-style: none;margin: 0px;padding: 0px;}s

 

------

例子：

 

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <style type="text/css">  
  6.     /* li 不换行，宽度根据内容自适应，通过 float 实现 */  
  7.     .ul_one {list-style: none;margin: 0px;padding: 0px;}  
  8.     .ul_one li {float: left;background-color: #ccd;margin: 0px 20px 10px 0px;}  
  9.       
  10.     /* li 不换行，宽度固定 */  
  11.     .ul_two {list-style: none;margin: 0px;padding: 0px;}  
  12.     .ul_two li {float: left;width: 100px;margin: 0px 20px 10px 0px;background-color: #ccd;overflow: hidden; line-height:1.6em;}  
  13.       
  14.     /* li 不换行，宽度根据内容自适应，通过 display:inline 实现 */  
  15.     .ul_three {list-style: none;margin: 0px;padding: 0px;}  
  16.     .ul_three li {display:inline;background-color: #ccd;margin: 0px 20px 10px 0px;}  
  17.       
  18.     .clear {clear: both;}  
  19. </style>  
  20. </head>  
  21. <body>  
  22.     <ul class="ul_one">  
  23.         <li>1ssssssssssssssssssssssss</li>  
  24.         <li>1</li>  
  25.         <li>1</li>  
  26.         <li>1</li>  
  27.         <li>1</li>  
  28.         <li>1</li>  
  29.         <li>1</li>  
  30.         <li>1</li>  
  31.         <li>1</li>  
  32.         <li>1</li>  
  33.         <li>1</li>  
  34.     </ul>  
  35.     <div class="clear"></div>  
  36.     <hr />  
  37.     <ul class="ul_two">  
  38.         <li>1ssssssssssssssssssssssss</li>  
  39.         <li>1</li>  
  40.         <li>1</li>  
  41.         <li>1</li>  
  42.         <li>1</li>  
  43.         <li>1</li>  
  44.         <li>1</li>  
  45.         <li>1</li>  
  46.         <li>1</li>  
  47.         <li>1</li>  
  48.         <li>1</li>  
  49.     </ul>  
  50.     <div class="clear"></div>  
  51.     <hr />  
  52.     <ul class="ul_three">  
  53.         <li>1ssssssssssssssssssssssss</li>  
  54.         <li>1</li>  
  55.         <li>1</li>  
  56.         <li>1</li>  
  57.         <li>1</li>  
  58.         <li>1</li>  
  59.         <li>1</li>  
  60.         <li>1</li>  
  61.         <li>1</li>  
  62.         <li>1</li>  
  63.         <li>1</li>  
  64.     </ul>  
  65. </body>  
  66. </html> 
hongtoushiziyuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html ul纵向不换行,css如何让li不换行？
weixin_28785681的博客
05-31 1375
ul 和 li 默认都是 display:block; 的标签，总是在新行上开始，占据一整行。那么如何让li不换行？下面本篇文章就来给大家介绍一下使用CSS强制li不换行的方法，希望对大家有所帮助。css如何让li不换行？可以通过2种方式实现 li 的 不换行显示：将 li 设为 display:inline; ，然后通过 marging 和 padding 设置 li 的间距。将 li 设为 f...
CSS控制LI不换行小技巧
Beautifully Dream
03-17 653
#nobr li{ display:inline;}AAAABBBB
css li 不换行（布局，内容）
01-28 177
参考这里 ------ 不换行的策略： 不换行原理： ul 和 li 默认都是 display:block; 的标签， 可以通过2种方式实现 li 的 不换行显示： * 将 li 设为 display:inline; ，然后通过 marging 和 padding 设置 li 的间距， * 将 li 设为 float:left; ，然后通过 ( margin ...
div css nowrap无换行
10-30
昨天在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
css li 超出隐藏代码
10-30
我们常常希望列表中的内容，超过设置的长度的时候，不要撑开父元素，也不希望它直接换行；我们更愿意让其超过部分用省略号来代替。而在title标签中，置放的是完整的标题。
ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏
09-25
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
html转pdf，ITEXT转HTML为PDF解决中文不换行问题
08-02
1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="<style>"; css +="table{"; ...
用ul、li标签创建css横向导航菜单示例
01-19
所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。 现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered ...
css li 不换行 没用到，留着
编程日常记录与总结 https://franciswmf.iteye.com
04-12 717
white-space:nowrap; /**强制不换行*/ overflow:hidden; /**自动隐藏文字*/ text-overflow: ellipsis; /**文字隐藏后添加省略号*/ -o-text-overf
css怎样不换行显示出来,css如何实现li不换行显示
weixin_36221980的博客
08-04 517
实现方法：1、使用display属性将li转成行内或是行内块标签，只需要给li设置“display:inline|inline-block”样式即可；2、使用float属性进行浮动，只需要给元素设置“float:left”样式即可。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。方法一：display方法， 需要将li转换成行内标签或者行内块标签...
html中的li标签不换行,css li 不换行（布局，内容）
weixin_31318441的博客
06-07 3224
参考这里------不换行的策略：不换行原理：ul 和 li 默认都是 display:block; 的标签，可以通过2种方式实现 li 的 不换行显示：* 将 li 设为 display:inline; ，然后通过 marging 和 padding 设置 li 的间距，* 将 li 设为 float:left; ，然后通过 ( margin & padding ) 设置 li 的间距，...
CSS控制LI不换行
锋行天下
07-13 495
<br /><mce:style><!-- #nobr li{ display:inline;} --></mce:style><style mce_bogus="1">#nobr li{ display:inline;}</style> <div> <ul id="nobr"> <li>AAAA</li> <li>BBBB</li> </ul> </div>
网页中 li 标签内元素 不换行的解决办法
热门推荐
zsg88的专栏
03-04 1万+
修改li的样式，增加 white-space: nowrap; 在用 bootstrap-treeview 做右侧菜单，整个菜单的div宽度设为220px，加滚动。 当菜单级数增多时，垂直方向可以滚动，单水平方向却折行了，  并没有出现想象中的水平方向的滚动。 初步判定是li标签内元素宽度超过外部div限定的宽度时自动折行，因此水平方向的滚动没有触发，于是寻找禁止换行的css属性。
li 不换行
acn70501的博客
09-02 186
ul li{ display: inline-block; margin: 0 5px; padding: 0; white-space: nowrap; } <ul> <li *ngFor="let menu of menus; let i = index"> <a href="#" [class.active]="...
css li 内容不换行小结
xiaoasha的博客
07-18 148
今天 ，对于如何使 li 中的内容换行这个问题纠缠了的我很郁闷。就一段 列表的代码改了改去li中的内容就是换不了行。分别添加了display:block; white-space:nowrap 两个属性都不行。最后发现是每个li 中的内容长度太短( :cry: ).最后通过加一个margin-right的属性 就一切 都ok了。 初学css,很多问题都没了解透，估计以后纠结...
div中li不换行的解决方案
图图小淘气的博客
11-23 638
<!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; chars.
css如何控制li元素换行
最新发布
05-21
可以使用CSS中的`display`属性和`float`属性来控制`li`元素的换行。 1. 使用`display:inline-block;`属性，将`li`元素设置为行内块元素，从而使`li`元素可以在同一行内排列，当一行放不下时，自动换行到下一行。 2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值