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 176
参考这里 ------ 不换行的策略： 不换行原理： 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给span加float:right右浮动后内容换行下移
09-25
5. **清除浮动**：还可以通过在`<li>`元素内添加一个清除浮动的元素来解决这个问题，但这通常用于处理更复杂的情况，不推荐在此简单场景下使用。 ```html <li> 文章标题' target='_blank'>文章标题 (2008-10-17 9...
使用white-space来阻止文字显示自动换行
12-13
不想让每行的文字自动换行，那就可以用css属性white-space来解决。代码如下： CSS Code复制内容到剪贴板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
Css测试，li超出部分的汉字隐藏
03-09
在CSS（层叠样式表）中，处理元素超出部分的隐藏是一个常见的需求，尤其是在文本布局或者列表项目（如li）的展示中。标题"Css测试，li超出部分的汉字隐藏"提示我们，这个话题主要关注如何在CSS中控制`<li>`元素内的...
CSS 图片横向排列实现代码
09-05
例如，使用Flexbox，可以将`float`和`display:inline`替换为`display:flex`和`flex-wrap:wrap`，这样在屏幕变窄时图片会自动换行。 总的来说，这个CSS图片横向排列实例提供了一个基本的布局策略，适用于简单的产品...
CSS基础知识.docx
07-23
* block 块元素类型，默认宽度为父元素宽度，可设置宽高，换行显示 * inline 行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示 * inline-block 行内块元素，默认宽度为内容宽度，可以设置宽高，同行显示 *...
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 3218
参考这里------不换行的策略：不换行原理：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>
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、付费专栏及课程。

余额充值