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

WBOY
풀어 주다: 2016-06-24 11:41:13
원래의
1593명이 탐색했습니다.

有时候会需要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>
로그인 후 복사

效果如下图:

  

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿