也青给我锁死 2020-05-15 16:36 采纳率: 33.3%
浏览 333
已结题

无序列表要求li display：inline，不写两个ul怎么实现文字在图片下方

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    *{margin:0;padding:0;}
    h3{color:red;}
    img{border:red;width:100px;height:100px;padding:0 20px}
    #ul1{list-style-type:none;text-align:center;}
    #ul1 li{display:inline;height:30px;width:120px;}
    #ul2{list-style-type:none;text-align:center;}
    #ul2 li{display:inline;height:30px;width:120px;padding:0 40px;}
</style>
</head>

<body>
<h3 align="center">图片</h3>
<ul id="ul1">
    <li><a href="#image1.jpg" ><img src="" border="0"></a></li>
    <li><a href="#image2.jpg" ><img src="" border="0"></a></li>
    <li><a href="#image3.jpg" ><img src="" border="0"></a></li>
    <li><a href="#image4.jpg" ><img src="" border="0"></a></li>

</ul>
  <!--<ul id="ul2" >
    <li><a href="#image1.jpg" >桂林山水</a></li>
    <li><a href="#image1.jpg" >桂林山水</a></li>
    <li><a href="#image1.jpg" >桂林山水</a></li>
    <li><a href="#image1.jpg" >桂林山水</a></li>
  </ul>-->
</body>
</html>

怎么实现文字在图片下方

  • 写回答

3条回答 默认 最新

  • Xiao_冬 2020-05-15 23:08
    关注

    不知道你要的是不是这种效果

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        h3{
            color: red;
            text-align: center;
        }
        img{
            width: 100%;
        }
        ul{
            list-style: none;
            text-align: center;
        }
        ul li{
            display: inline-block;
            width: 120px;
            height: 100px;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <h3>图片</h3>
    <ul>
        <li>
            <a href="#"><img src="https://www.w3school.com.cn/i/eg_chinarose.jpg" alt="图片无法显示"></a>
            <a href="#">桂林山水</a>
        </li>
        <li>
            <a href="#"><img src="https://www.w3school.com.cn/i/eg_chinarose.jpg" alt="图片无法显示"></a>
            <a href="#">桂林山水</a>
        </li>
        <li>
            <a href="#"><img src="https://www.w3school.com.cn/i/eg_chinarose.jpg" alt="图片无法显示"></a>
            <a href="#">桂林山水</a>
        </li>
        <li>
            <a href="#"><img src="https://www.w3school.com.cn/i/eg_chinarose.jpg" alt="图片无法显示"></a>
            <a href="#">桂林山水</a>
        </li>
    </ul>
</body>
</html>

    图片说明

    评论

报告相同问题？

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)