参考这里

------

不换行的策略：

不换行原理：

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>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</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>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</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>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

        <li>1ssssssssssssssssssssssss</li>

    </ul>

</body>

</html>

css li 不换行（布局，内容）的更多相关文章

  1. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  2. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  3. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  4. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  5. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  6. css之display:inline-block布局

    css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...

  7. 【转载】CSS + DIV 实现局部布局

    HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    ...

  8. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  9. css之display:inline-block布局--转

    css之使用display:inline-block来布局   css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...

随机推荐

  1. 另类Unity热更新大法：代码注入式补丁热更新

    对老项目进行热更新 项目用纯C#开发的? 眼看Unity引擎热火朝天,无数程序猿加入到了Unity开发的大本营. 一些老项目,在当时ulua/slua还不如今天那样的成熟,因此他们选择了全c#开发:也 ...

  2. 全息眼镜HoloLens可快速捕捉真人3D图像

    http://www.d9soft.com/zixun/62287.html 北京时间3月28日午间消息,微软研发部门开发出一种新的3D视频捕捉系统“Holoportation”,可以实现将某人3D图 ...

  3. Sublime3安装过程及常用插件安装及常用快捷键

    1  先去http://www.sublimetext.com/官网下载软件,然后网上找一个验证码,注册完成. 2  安装Package Control ,Package Control 插件是一个方 ...

  4. [No00003A]操作系统Operating Systems 内核级线程Kernel Threads内核级线程实现Create KernelThreads

    开始核心级线程 内核级线程对多核的支持怎么样? 和用户级相比,核心级线程有什么不同? ThreadCreate 是系统调用,内核管理TCB ,内核负责切换线程 如何让切换成型? − − 内核栈,TCB ...

  5. IDF实验室WORD隐写术

    上帝也哭泣http://ctf.idf.cn/index.php?g=game&m=article&a=index&id=48 下载下来,发现是一个word文档,看来信息应该就 ...

  6. lca入门———树上倍增法（博文内含例题）

    倍增求LCA: father[i][j]表示节点i往上跳2^j次后的节点 可以转移为 father[i][j]=father[father[i][j-1]][j-1] 整体思路: 先比较两个点的深度, ...

  7. 微信JSSDK配置文件说明

    微信JSSDK配置文件说明 1.官方配置 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开, ...

  8. linux运维中的命令梳理（四）

    ----------管理命令---------- ps命令:查看进程 要对系统中进程进行监测控制,查看状态,内存,CPU的使用情况,使用命令:/bin/ps (1) ps :是显示瞬间进程的状态,并不 ...

  9. JAZZ

    今天知道公司中的JAZZ是变形金刚中的“爵士”,如果写内部代码,就好像在操作“爵士”,还是蛮有意思的.先是接触了jQuery,然后是jQuery-ui,然后jazz,继续中...... JAZZ: 爵 ...

  10. Jenkins 安装

    1. 调整tomcat的jvm配置, 以免内存不够, 在catalina.sh中 #!bin/sh下添加 JAVA_OPTS="-server -Xms1024m -Xmx1024m -XX ...