萌新提问，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>

酱紫？

<!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>

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>桂林山水风景</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .container {
            text-align: center;
        }

        h3 {
            color: red;
            text-align: center;
        }


        ul {
            display: flex;
        }

        li {
            display: inline;
            width: 100px;
            height: 100px;
            position: relative;

        }

        img {
            width: 100px;
            height: 100px;
            border: 0px;
        }

        span {
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3>桂林山水风景图片</h3>
        <ul>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水1</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>
            <li>
                <a href="img/guilin01.jpg">
                    <img src="img/guilin01.jpg" alt="">
                    <span>桂林山水2</span>
                </a>
            </li>

        </ul>
    </div>
</body>

</html>

使用到定位。建议多看看ui框架吧。

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y