ul {
  white-space: nowrap;
}
li {
  display: inline-block;
}
 
 
white-space 属性设置如何处理元素内的空白。
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。 
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

ul中li元素横向排列且不换行的更多相关文章

  1. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  2. ul中li分列显示

    让ul中li分列显示,用li显示两列如下(要显视多列的自己想办法,哈哈): 2列 <ul> <li style="display:block;float:left;widt ...

  3. html中测试div、ul和li、table排列多个块

    前面有三篇博文测试了这三种方式,一.相关博文:LODOP问答部分链接.该文用的是div定位,用的是所有小div相对于大div进行定位,大的div设置relative定位,小的设置absolute相对于 ...

  4. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  5. Jquery和JS获取ul中li标签(转)

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  6. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  7. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  8. N个数组中所有元素的排列组合(笛卡尔积)算法

    (1)N个数组对象中所有元素排列组合算法 private List<List<Object>> combineAlg(List<Object[]> nArray) ...

  9. ul的li元素水平并居中的css

    ul{ text-align:center; } li{ display:inline } 这样li元素不需要float且可以居中 比较好样式如下 ul li { // float: left; pa ...

随机推荐

  1. 解决Zend加密的PHP页面出现Incompatible file format的问题

    错误如图: 致命错误:不兼容的文件格式可能的原因: 1.文件本身加密的问题,很有可能你用的Zend进行加密了,但是因为版本的问题,很有可能是你的主机上的Zend Optimizer版本太低了.2.文件 ...

  2. Uva 10375 选择与除法 唯一分解定理

    题目链接:https://vjudge.net/contest/156903#problem/E 题意:已知 求:C(p,q)/C(r,s) 其中p,q,r,s都是10^4,硬算是肯定超数据类型的. ...

  3. 1.4 NBU配置备份策略(Policy)

    1.4 配置备份策略(Policy) 一个备份策略由四部分组成. Attributes(属性) Policy是否Active Policy类型 由此Policy产生的任务的优先级 使用的Storage ...

  4. bootstrap suggest搜索建议插件

    近日因工作需要看了下此插件. 首先下载bootstrap js包.添加此插件的引用.注意css样式要引用,不能忘记. 前台页面代码,因为楼主做的是选项卡切换查询不同的结果. <tr> &l ...

  5. rabbitmq安装使用

    使用 http://www.open-open.com/lib/view/open1325131828249.html ubuntu:apt-get install erlang-noxsudo ap ...

  6. fcc初级算法方法总结

    var arr = str.split("分隔符"): var newArr = arr.reverse(); var str = arr.join("连接符" ...

  7. Subversion简介

    作为一名编程人员,SVN经常作为代码.项目的版本控制,殊不知SVN也可作为其他领域的版本控制,例如对文档.音频.视频等 . SVN可以看成一种文件系统,为了使工作人员提高工作效率,可以进行并行的工作, ...

  8. JSP自定义标记

    JSP自定义标记(可以使JSP网页变得简洁并且易于维护) 一.自定义标记的方式 1.实现接口Tag 2.继承类TagSupport或BodyTagSupport   二.JSP自定义标记的生命周期 1 ...

  9. WPF与Silverlight对比

    1.WPF中控件的肤色可以直接:telerik:StyleManager.Theme=”XXXXX”,不用再导入肤色的dll包.可Silverlight使用系统肤色时,要导入肤色的dll包. WPF引 ...

  10. POJ2409 Let it Bead(Polya定理)

    Let it Bead Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6443   Accepted: 4315 Descr ...