html中 让 ul 的多个 li 在一行内显示_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:41:13
Original
1594 Leute haben es durchsucht

有时候会需要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>
Nach dem Login kopieren

效果如下图:

  

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage