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
------
例子：
<!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>
------
分享到：
相关推荐
1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="<style>"; css +="table{"; ...
昨天在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。
不想让每行的文字自动换行，那就可以用css属性white-space来解决。代码如下： CSS Code复制内容到剪贴板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
我们常常希望列表中的内容，超过设置的长度的时候，不要撑开父元素，也不希望它直接换行；我们更愿意让其超过部分用省略号来代替。而在title标签中，置放的是完整的标题。
各级菜单都可以随内容的长度自行适应宽度，而当浏览器分辨率较低时一级导航也可以自动换行，而多级子菜单靠左显示还是得手动调整。 DOM结构非常简单，只是 ul.nav 与 li.item 的互相嵌套而已。 看代码吧（长是长了...
所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。 现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered ...
列表标签：使用<ul><li>实现无序列表，使用<ol><li>实现有序列表； 使用标签添加图片，使用标签添加链接，使用table添加表格，使用thead、tbody、tfood定义表格； 表单标签：使用创建表单，文本输入框，密码输入框，...
3.1. 标签：换行效果 14 3.2. 特殊字符 ；实现空格效果 14 3.3. 标签：水平线效果 15 4. HTML5列表标签 15 4.1. <ul> <li>标签：实现无序列表 15 4.2. <ol><li>标签：实现有序列表 16 5. HTML5图片，链接&...
这种样式只会对当前标签起作用，不能对样式进行复用，不方便后期维护，不推荐使用 2.内部样式表 将样式表编写到head中的style标签中 <style type="text/css"> 使用内部样式表，进一步将表现和结构分离，...
元素的类型 元素的类型 01 元素的类型 ...在CSS中，根据它的分类我们可以把HTML元素分为三种类型： ...没有自己的形状，不能定义宽高，最小内容单元也呈现矩形形状； 遵循盒子模型基本规则。 描述 示例 <spa
公共样式，基本样式。几百行不换行的样式，方便打包发布不出现问题。 其中有涉及修改浏览器的默认样式，如：ul-li标签，图片的水平对齐等等。 常用颜色，常用边框，常用内边距外边距的值，字号等等方便快速布局。
但是当高度不一致时，就需要想别的办法来解决了： 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; ...
虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，而CSS很巧妙地解决了这个问题，请看下面的代码： 代码一：用于非表格LI或span等都可以 复制代码代码如下:.text-overflow { display:block;/*内联...
ex:div,h1-h6,p,ul,li,ol,dl,dt,dd 2.行内元素允许修改尺寸 表单控件元素 3.本身具备width和height属性的元素 ex:img,table 注意：大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多，元素区域小...
要点： 块状元素前后元素会换行 行内元素前后元素不会换行 第一：行内元素与宽度 宽度不起作用 复制代码代码如下: span { width:200px; } 没有变化 第二：行内元素与高度 高度不起作用 复制代码代码如下: span{...
用SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题，这个问题在网上也找不到什么解决办法，一直困扰了我很久，今天算是把它解决了，办法其实简单，下面说下… 解决方法： 打开shCoreDefault....
特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承父级的宽度，换行显示—div ul li p h1 示意图 总结：块元素可以添加宽高的属性，独占一行 2.行元素 特点：宽高默认都是0，不能设置宽和...
只要在列表项之间避免换行就行了,所以要把<li>转换为内联. HTML和CSS代码如下: 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” ...
复制代码代码如下: <ul> <li><a>ss</a><a>dd</a></li> <li><a>ss</a><a>dd</a></li> </ul> 情景如上： 这次的情况与上次不同，上次设置浮动的元素没有设置上边距，所以直接将浮动的元素移到不浮动的元素之前就可以...