有时候会需要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. ExtJS笔记4 容器与布局（Layouts and Containers）

    The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning ...

  2. 20145235 《Java程序设计》第5周学习总结

    教材学习内容总结 8.1语法与继承架构 try和catch语法,如果被try{}的语句出现了catch()的问题就执行catch{}的语句. 错误的对象都继承于java.long.Throwable, ...

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

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

  4. simplify the design of the hardware forming the interface between the processor and thememory system

    Computer Systems A Programmer's Perspective Second Edition Many computer systems place restrictions ...

  5. Running Kafka At Scale

    https://engineering.linkedin.com/kafka/running-kafka-scale If data is the lifeblood of high technolo ...

  6. 接口测试从未如此简单 - Postman (Chrome插件)【转】

    一个非常有力的Http Client工具用来测试Web服务的, 我这里来介绍如何用它测试restful web service 注:转载请注明出处http://www.cnblogs.com/wade ...

  7. FTS抓包看蓝牙验证的过程

    1.概述    在进行蓝牙设备的连接时,为了保护个人隐私和数据保密的需要,需要进行验证.   2.一些Frame Frame74:本地发送Authentication requset command ...

  8. 一个mysql开启多个端口

    在测试Mysql多主一从服务器,即一个从服务器多端口同步不同主库.本文记录了开启不同端口的操作. 详细步骤: 1.首先要先把my.cnf配置文件复制一份,开几个端口要复制几份当然要重新命名. 如: c ...

  9. php--字符串函数分类总结

    PHP语言中的字符串函数也是一个比较易懂的知识.今天我们就为大家总结了将近12种PHP字符串函数,希望对又需要的朋友有所帮助,增加读者朋友的PHP知识库.   1.查找字符位置函数 strpos($s ...

  10. android部分机型（HTC D610） menu键的显示问题

    今天遇到了一个很恶心的问题... htc某些机器的menu键是在屏幕里的,可以由系统控制显示和隐藏.今天遇到了一个问题,有两个应用,一个运行后显示menu键,另一个不显示... 找了好一会儿,发现是  ...