css---使用display:inlie-block实现图片横排

最新推荐文章于 2023-11-03 10:58:29 发布

chen_zan_yu_

最新推荐文章于 2023-11-03 10:58:29 发布

阅读量1k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/90516031

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用display:inlie-block实现图片横排</title>
		<style type="text/css">
			body{
				margin: 0px;/*重置body外边框为0*/
				font-size: 12px;
				text-align: center;
				font-family: verdana,geneva,sans-serif;
			}
			#pic{
				width: 600px;
				margin: 0 auto;/*实现div内容在浏览器窗口中水平居中*/

			}
			#pic ul{
				margin: 0px;/*ul上下外边框默认为12px，重置ul的默认外边框样式*/
				padding: 0px;/*ul的左内边距默认为40px，重置ul的默认内边框样式*/
				background: #eee;
				list-style-type: none;/*设置列表的项目符号*/
			}
			#pic ul li{
				margin: 10px 20px;
				display: inline-block;
					  }
		    img{
		    	width: 56px;
		    }
		</style>
	</head>
	<body>
		<div id="pic">
			<ul>
				<li><img src="zjrwan.jpg"><br/>美女1</li>
				<li><img src="zjrwan.jpg"/><br/>美女2</li>
				<li><img src="zjrwan.jpg"/><br/>美女3</li>
				<li><img src="zjrwan.jpg"/><br/>美女4</li>
				<li><img src="zjrwan.jpg"/><br/>美女5</li>
				<li><img src="zjrwan.jpg"/><br/>美女6</li>
				<li><img src="zjrwan.jpg"/><br/>美女7</li>
				<li><img src="zjrwan.jpg"/><br/>美女8</li>
				<li><img src="zjrwan.jpg"/><br/>美女9 </li>
				<li><img src="zjrwan.jpg"/><br/>美女10</li>
				<li><img src="zjrwan.jpg"/><br/>美女11</li>
				<li><img src="zjrwan.jpg"/><br/>美女12 </li>
				<li><img src="zjrwan.jpg"/><br/>美女13</li>
			</ul>
		</div>

	</body>
</html>

效果：