Mr 钟 2021-05-06 12:10 采纳率: 100%
浏览 153
已采纳

萌新提问，li标签中文字如何显示在图片下方呢？

 请教下如何做到把li标签中的文字显示在图片的下方，并且保持所有图片横向排列呢？

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>桂林山水风景</title>
		<style type="text/css">
			h3 {
				color: red;
				text-align: center;
			}

			div {
				text-align: center;
				background-color: red;
			}

			ul {
				list-style-type: none;
				text-align: center;
			}
			li {
				display: inline;
				width: 120px;
				height: 30px;
			}

			img {
				width: 100px;
				height: 100px;
				border: 0px;
			}
		</style>
	</head>
	<body>
		<h3>桂林山水风景图片</h3>
		<div>
			<ul>
				<li><a href="img/guilin01.jpg"><img src="img/guilin01.jpg" >桂林山水1 </a></li>
				<li><a href="img/guilin02.jpg"><img src="img/guilin02.jpg">桂林山水2 </a></li>
				<li><a href="img/guilin03.jpg"><img src="img/guilin03.jpg">桂林山水3 </a></li>
				<li><a href="img/guilin04.jpg"><img src="img/guilin04.jpg">桂林山水4 </a></li>
			</ul>
		</div>
	</body>
</html>
  • 写回答

4条回答 默认 最新

  • 斯洛文尼亚旅游 2021-05-06 12:15
    关注

    酱紫？ 

    <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>桂林山水风景</title>
		<style type="text/css">
			h3 {
				color: red;
				text-align: center;
			}
 
			div {
				text-align: center;
				background-color: red;
			}
 
			ul {
				list-style-type: none;
				text-align: center;
			}
			li {
				display: inline-block;
				width: 120px;
				height: 30px;
			}
 
			img {
				width: 100px;
				height: 100px;
				border: 0px;
			}
		</style>
	</head>
	<body>
		<h3>桂林山水风景图片</h3>
		<div>
			<ul>
				<li><a href="img/guilin01.jpg"><img src="img/guilin01.jpg" ><br>桂林山水1 </a></li>
				<li><a href="img/guilin02.jpg"><img src="img/guilin02.jpg"><br>桂林山水2 </a></li>
				<li><a href="img/guilin03.jpg"><img src="img/guilin03.jpg"><br>桂林山水3 </a></li>
				<li><a href="img/guilin04.jpg"><img src="img/guilin04.jpg"><br>桂林山水4 </a></li>
			</ul>
		</div>
	</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？