html中让 ul 的多个 li 在一行内显示

发表于2015-07-14 14:40:53| --次阅读| 来源webkfa| 作者html,css

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

有时候会需要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>

效果如下图：