有时候会需要ul的li都在同一行显示，避免li跑到下一行去，今天遇到了这个问题，记录下来，避免忘记~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin-bottom:0;
			border: 0;
		}
		.box{
			width: 640px;
			height: 50px;
			overflow-x: scroll;
			overflow-y: hidden;
		}
		ul{
			display:inline;
			white-space: nowrap;
		}
		ul li{
			padding: 10px 20px;
			display: inline-block;
			background:pink;
			white-space:nowrap;
		}
	</style>
</head>
<body>
<div class="box">
	<ul>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
		<li>所有li都在一行显示</li>
	</ul>
</div>
</body>
</html>

效果如下图：

　　

随便写了下，好丑，不要在意细节哈哈哈~~~~

html中 让 ul 的多个 li 在一行内显示的更多相关文章

  1. 关于li标签行内显示的问题

    在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <! ...

  2. white-space norma nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行

    日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被<br&g ...

  3. li分两列显示

    只要控制了li的宽度,利用浮动就能实现<style type="text/css"> .my ul { width: 210px; } .my li { width: ...

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

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  5. 用正则表达式抓取网页中的ul 和 li标签中最终的值！

                获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1& ...

  6. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  7. 众说纷纭的ul、ol、li

    (1)提到ul ol li,大家都知道,就是三个列表标签,ul表示无需列表(unordered list),ol表示有序列表(oredr list), li 表示列表项(list item),之前我也 ...

  8. bootStrap中的ul导航4

    <div class="container"> <br/> <ul class="nav nav-pills nav-justified&q ...

  9. bootStrap中的ul导航

    <!doctype html><html > <head> <meta charset="utf-8"> <link rel= ...

随机推荐

  1. linux 常用的基本命令

    $ ls # 查看文件列表 $ ls dir_name | more : 分页查看文件列表 $ ll -h dir_name # 以 KB.MB.GB格式查看文件大小 $ ll -Sh  # --so ...

  2. 页面静态化2 --- 使用PHP缓存机制来完成页面静态化（上）（ob_flush和flush函数区别用法）

    我们可以使用PHP自带的缓存机制来完成页面静态化,但在这里,需要说明一点,仅靠PHP缓存机制并不能完美的解决页面静态化,往往需要和其他页面静态技术(通常是伪静态技术)结合使用 例子: 当访问一个页面时 ...

  3. Bootstrap页面布局9 - BS列表

    列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...

  4. linux 自动登录脚本

    #!/usr/bin/expect set port 22 set user xiaoming set password xiaoming123 set host 111.222.22.33 set ...

  5. 医生工作台二期-bug总结

    bug记录 1.视频问诊详情查看流,流里进入检查单详情上传图片后返回闪退 这块cell用的相同的id,开始创建的是第一个if里面的cell,后来创建的是else里面的cell,因为之前用TipCell ...

  6. Java Web项目调优原则

    1. 根据oracle生成的awr文件排除是否是数据库或者sql问题 2.配置中间件的dump文件路径,gc log文件路径 3.通过 MemoryAnalyzer 分析 dump文件 4.通过exc ...

  7. AndEngine

    AndEngine http://www.oschina.net/question/54100_16765

  8. WIN API 擦除所绘图像

    COLORREF circle_color = RGB(0, 105, 255); //获取窗口DC HDC hdc = GetDC(hWnd_); //背景色透明 SetBkMode(hdc, TR ...

  9. 将真彩色转换成增强色的方法（即RGB32位或RGB24位颜色转换成RGB16位颜色的函数）

    今天由于程序需要,需要将真彩色转换成增强色进行颜色匹配,上网搜了一下没搜到相应函数,于是研究了一下RGB16位的增强色,写了这个函数: public static int RGB16(int argb ...

  10. Qt 自定义 滚动条 样式（模仿QQ）

    今天是时候把软件中的进度条给美化美化了,最初的想法就是仿照QQ. 先前的进度条是这样,默认的总是很难受欢迎的:美化之后的是这样,怎么样?稍微好看一点点了吧,最后告诉你实现这个简单的效果在Qt只需要加几 ...