Heim  >  Artikel  >  Web-Frontend  >  html中 让 ul 的多个 li 在一行内显示_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:41:131592Durchsuche

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

效果如下图:

  

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

Stellungnahme:
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