转至繁体中文版　　　  | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告：     敏韬网|教学资源学习资料永久免费分享站！  [mintao  2008年9月2日]        
您现在的位置： 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
css ul li 不换行    热     ★★★

css ul li 不换行

作者：闵涛 文章来源：闵涛的学习笔记 点击数：1847 更新时间：2012/6/8 19:05:29

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>


[网页制作]如何正确的理解CSS的float浮动属性？  [Web开发]如何给动态的或静态的CheckBoxList多选钮添加选择…
[Web开发]长篇大论—图文解说DridView、DataList、DetailsV…  [Web开发]一大堆常用的超强的正则表达式及RegularExpressio…
[Web开发]asp.net如何实现按回车键就执行按钮的Click()事件  [Web开发]ASP.NET环境下如何使用ArrayList和Hashtable
[平面设计]Flash动作脚本Actiong之数学Math数学函数、MovieC…  [平面设计]MovieClip对象原型的使用与分析
[平面设计]功能超强的GIF动画制作软件─Ulead Gif Animator  [网页制作]使用CSS实现Toolips效果
教程录入：mintao    责任编辑：mintao 
  • 上一篇教程：

  • 下一篇教程：
    • 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    　 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]
    　　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
    		•
    赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题，因而无法显示。
    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长：MinTao ICP备案号：鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网。A打造B、C、D……
    		咸宁网络警察报警平台