`
simple_hui
  • 浏览: 154929 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

css li 不换行

CSSHTML 
阅读更多

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>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
	/* li 不换行，宽度根据内容自适应，通过 float 实现 */
	.ul_one {list-style: none;margin: 0px;padding: 0px;}
	.ul_one li {float: left;background-color: #ccd;margin: 0px 20px 10px 0px;}
	
	/* li 不换行，宽度固定 */
	.ul_two {list-style: none;margin: 0px;padding: 0px;}
	.ul_two li {float: left;width: 100px;margin: 0px 20px 10px 0px;background-color: #ccd;overflow: hidden; line-height:1.6em;}
	
	/* li 不换行，宽度根据内容自适应，通过 display:inline 实现 */
	.ul_three {list-style: none;margin: 0px;padding: 0px;}
	.ul_three li {display:inline;background-color: #ccd;margin: 0px 20px 10px 0px;}
	
	.clear {clear: both;}
</style>
</head>
<body>
	<ul class="ul_one">
		<li>1ssssssssssssssssssssssss</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>
	<div class="clear"></div>
	<hr />
	<ul class="ul_two">
		<li>1ssssssssssssssssssssssss</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>
	<div class="clear"></div>
	<hr />
	<ul class="ul_three">
		<li>1ssssssssssssssssssssssss</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
		<li>1</li>
	</ul>
</body>
</html>

 

分享到：
| ext相关
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html转pdf，ITEXT转HTML为PDF解决中文不换行问题

    1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="&lt;style&gt;"; css +="table{"; ...

    div css nowrap无换行

    在此过程中，开发者经常会遇到需要控制元素不换行的问题，尤其是在水平排列列表项（li）时，需要确保在容器（ul）的宽度范围内，列表项能够自动适应内容长度并且在空间不足时换行排列。但在早期的浏览器版本中，如IE...

    关于IE标签LI文字换行问题

    但是在某些浏览器中，尤其是在较早期版本的Internet Explorer (IE) 浏览器中，开发者可能会遇到LI元素中的文字不按预期换行的问题。这会导致文字长度超出UL宽度时无法自动换行到下一行，而是会在当前行折返，影响...

    Css测试，li超出部分的汉字隐藏

    在CSS（层叠样式表）中，处理元素超出部分的隐藏是一个常见的需求，尤其是在文本布局或者列表项目（如li）的展示中。标题"Css测试，li超出部分的汉字隐藏"提示我们，这个话题主要关注如何在CSS中控制`&lt;li&gt;`元素内的...

    纯数字或者字母不换行解决方法

    本文将详细介绍如何通过CSS样式来解决纯数字或字母不换行的问题，并提供实际应用案例，帮助开发者更好地理解和运用这一技巧。 #### 一、问题背景与分析 在默认情况下，浏览器会根据元素的宽度自动进行文字换行处理...

    ul的li样式

    默认情况下，浏览器会为`&lt;ul&gt;`添加一个左对齐的项目符号（通常是圆点），而`&lt;li&gt;`则会换行显示。然而，这仅仅是最基本的表现形式，我们可以利用CSS来改变它们的外观。 1. **清除默认样式**：在开始自定义样式前，...

    ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

    在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...

    css li 超出隐藏代码

    在`&lt;style&gt;`标签中定义了CSS样式规则，然后在`&lt;ul&gt;`元素内放置了多个`&lt;li&gt;`元素，每个元素中包含了重复的文本内容，以演示当文本长度超过`li`元素宽度时，如何显示省略号来代替超出的部分。 总之，通过合理使用`...

    使用white-space来阻止文字显示自动换行

    不想让每行的文字自动换行，那就可以用css属性white-space来解决。代码如下： CSS Code复制内容到剪贴板 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    CSS中的ul与li样式详解.docx

    CSS 中的 ul 与 li 样式详解 CSS 中的 ul 和 li 元素是使用 CSS 布局页面时常用的元素，其中有专门控制列表表现的属性。下面我们来详细介绍这些属性。 一、 list-style-type 属性 list-style-type 属性是用来定义...

    div+CSS 多排多列的显示东西．不使用LI

    本主题探讨的是如何使用`div`和CSS实现多排多列的布局，而不依赖于`li`（列表项）元素。下面我们将深入讲解这个话题。 首先，`div`是一个通用的块级元素，它本身没有特定的语义，但可以通过CSS赋予不同的样式和布局...

    设置<li>让页面同时显示两列

    /* 不需要额外的样式，网格会自动处理布局 */ } ``` 无论是哪种方法，我们都可以通过媒体查询（media queries）来实现响应式设计，确保在不同屏幕尺寸下都能保持良好的布局效果。例如，我们可以为小屏幕设备调整列...

    纯css无限级导航

    各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构非常简单，只是 ul.nav 与 li.item 的互相嵌套而已。 看代码吧（长是长了...

    用ul、li标签创建css横向导航菜单示例

    所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。 现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered ...

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    尽管我们不能确定具体的原因，但通过调整负边距可以有效地解决这个问题。 总的来说，处理IE7中的浮动元素换行错位问题需要对浏览器的兼容性问题有一定的了解。当遇到类似的问题时，可以尝试调整元素的排列顺序、...

    normalize.css-8.0.0.zip

    `normalize.css`的核心理念是不完全清除所有元素的默认样式，而是保留那些有意义的、跨浏览器一致的基础样式，同时修正不一致和不理想的默认样式。这一方法与传统的CSS重置（如Eric Meyer Reset或Reset CSS）有所...

    li布局，两行两列

    `，使得子元素在一行内不能容纳时自动换行。每个`&lt;li&gt;`元素的`flex`属性设置了弹性盒模型，`calc(50% - 10px)`确保每个单元格占据50%的宽度，减去10像素的间距（这里是左右各5px，所以总共10px）。 为了确保在不同...

    CSS通用样式基本文档

    ### CSS通用样式基本文档知识点解析 #### 一、概述 本文档主要介绍了一套用于前端开发的CSS通用样式集合，适用于新手及前端学习者。通过规范化的CSS样式编写，可以帮助开发者更加高效、一致地构建网站界面。下面将...

    css+ul设计的多级导航菜单

    在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。本文将详细介绍如何使用CSS（层叠样式表）结合HTML的无序列表（`&lt;ul&gt;`）元素来创建一个多级的导航菜单，无需编写JavaScript代码...

    CSS默写标准文档

    `保持不换行。 - **line-height**: 行高，如`line-height: 1.5;`。 - **word-spacing**: 单词间距，如`word-spacing: 2px;`。 - **letter-spacing**: 字母间距，如`letter-spacing: 1px;`。 ### 5. 背景 - **...

Magicbox
Global site tag (gtag.js) - Google Analytics