zhaoyang_dt 2022-05-22 23:27 采纳率: 40%
浏览 20

div盒子里图片下方不能直接加文字


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="image/logo.css">
</head>
<body>
    <!--头部区域开始-->
    <div class="header w">
        <div class="logo">
            <img src="image/logo.img.png" alt="学车在线">
        </div>
        <div>
            <ul >
                <li class="li"><a href="#">首页</a></li>
                <li class="li"><a href="#">课程</a></li>
                <li class="li"><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <button></button>
        </div>
        <div class="qq">
            <img src="image/qq.img.png" alt="">
        </div>
    </div>
    <!--头部区域结束-->
    <div class="banner">
        <div class="bas">
            <div class="nav">
               <ul class="a">
                   <li><a href="#">前端开发<span>></span></a></li>
                   <li><a href="#">后端开发<span>></span></a></li>
                   <li><a href="">移动开发<span>></span></a></li>
                   <li><a href="">人工智能<span>></span></a></li>
                   <li><a href="">商业预测<span>></span></a></li>
                   <li><a href="">云计算&大数据<span>></span></a></li>
                   <li><a href="">运维&大测试<span>></span></a></li>
                   <li><a href="">UI设计<span>></span></a></li>
                   <li><a href="">产品<span>></span></a></li>
               </ul>
            </div>
            <!--课程表模块-->
            <div class="course">
                <div class="mecourse">
                    我的课程表
                </div>
             <div class="jixu1">
                 <ul>
                     <li>
                         <h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                           <p>正在学习-使用对象</p>
                           </li>
                           <li>
                            <h4>继续学习 程序语言设计</h4>
                           <p>正在学习-使用对象</p>
                           </li>
                 </ul>
                  <div class="la">
                      全部课程
                  </div>
             </div>
            </div>
        </div>
    </div>
<!--课程表模块结束-->
<!--精品推荐模块-->
    <div class="jingpin">
        <h4>精品推荐</h4>
        <ul>
            <li><a href=""><span>|</span>JQuery</a></li>
            <li><a href=""><span>|</span>Spark</a></li>
            <li><a href=""><span>|</span>MySQL</a></li>
            <li><a href=""><span>|</span>JavaWeb</a></li>
            <li><a href=""><span>|</span>MySQL</a></li>
            <li><a href=""><span>|</span>JavaWeb</a></li>
        </ul>
        <p>修改兴趣</p>
    </div>
<!--精品推荐模块结束-->
<!--精品推荐具体-->
<div class="jingpintuijian">
    <h4>精品推荐</h4>
    <p>查看全部</p>
    <div class="jinpin1 ">
        <div class="jinpin2">
            <ul>
            <li>
                <img src="矩形 35.png" alt="">
                <p>我的意中人</p>
            </li>
            
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
        <div class="jinpin2"></div>
    </div>
</div>

<!--精品推荐具体结束-->


    
</body>
</html>

以上为Html代码


* { padding: 0;
    margin: 0;}
.w { width: 1200px;
     margin: auto;}
.header {
         height: 48px;
         margin: 30px auto;
        }
body { height: 3000px;}
.logo { float: left;
       width: 200px;
       height: 46px;
       padding-right: 28px;}
.li {  line-height: 48px;
       height: 48px;
       padding-left: 32px;
       float: left;
      }
li { 
      list-style: none;}
a:hover {border-bottom: 1px solid #00a4ff;}
a {    display: block;
       color: #000;
   text-decoration: none;}
.search {  float: left;
            margin-left: 94px;
            line-height: 40px;
           width: 412px;
           height: 48px;
           }
.search input {  float: left;
                width: 360px;
                height: 40px;
                border: 1px solid #00a4ff;
                border-right: 0;}
.search button {    float: left;
                    width: 50px;
                   height: 42px;
                 background: url("button.img.png");
                 border: 0;
                }
.qq { float: left;
       padding-top: 6px;
      padding-left: 27px;}
.banner { 
          height: 420px;
           background-color: #1c036c;}
.bas    {   
             height: 420px;
             margin: auto;
             background: url("banner.img.png") no-repeat top center;
             }
.nav {  float: left;
        width: 186px;
        height: 420px;
         margin-left: 120px;
        background:rgba(0,0,0,0.3);}
.nav ul li a {  
                font-size: 14px;
                color:#fff ;}
.nav ul li {  padding-left: 17px;
              padding-top: 26px;
              padding-right: 5px;
              }
.nav ul li :hover { color: #00a4ff;}
.nav ul li a span { float: right; }
 .course {  float: right;
            margin-top: 48px;
            margin-right: 85px;
            background-color: #fff;
          width: 230px;
          height: 300px;}
.mecourse { width: 230px;
            height: 46px;
            background-color: #9bceea;
            line-height: 46px;
            text-align: center;
            color: #fff;}
.jixu1 ul li h4 { color:#4e4e4e ;
                  font-size: 14px;}
.jixu1 ul li p { color: #dedede;
                 font-size: 12px;}
.jixu1 { margin:0 17px}
.jixu1 ul li { padding: 15px 0;
              border-bottom: 1px solid #4e4e4e;}
.la{    margin-top: 5px;
        width: 199px;
     height: 40px;
     border: 1px solid #00a4ff ;
     line-height: 40px;
     color:#00a4ff;
     text-align: center;
     font-size: 16px;}
.jingpin {  margin-left: 120px;
            margin-top: 10px;
           width: 1202px;
           height: 60px;
           line-height: 60px;
           background-color: #fff;
           box-shadow: 0 2px 2px 3px rgba(0,0,0,0.1);}
.jingpin ul li { float: left;
                 
                 }
.jingpin ul li a {  padding-right:  30px;
                    }
.jingpin ul li:hover { color: #00a4ff;}
.jingpin h4{   float: left;
               margin: 0 18px 0 44px;
              font-size: 16px;
             color: #00a4ff;  }
.jingpin p {  float: right;
              margin-right: 10px;
               font-size: 16px;
             color: #00a4ff; } 
.jingpin ul li span{ padding-right: 30px;
                     color: #4e4e4e;}
.jingpintuijian h4 {  float: left;
                     margin: 34px 0px 21px 0;
                     font-size: 20px;
                     color:#494949 ;
                     font-family: 微软雅黑;}
.jingpintuijian { margin-left: 120px;}
.jingpintuijian p {  float: right;
                     font: 12px 微软雅黑;
                    margin: 42px 150px 20px 0 ;}
.jinpin1  { height: 590px;
             width: 1220px;
             padding-top: 82px;
             }

.jinpin2 ul li { float: left;
                 width: 228px;
               height: 290px;
                margin: 0 14px 14px 0 ;
                background-color: #00a4ff;
                }
.jinpin2 ul li img { width:100%}
.jinpin2 ul li p{      font-size: 14px;
                         margin: 0px  16px  0 22px;}

以上为css代码
我的问题是精品推荐下方的第一个盒子,我的文字为什么不可以直接在图片下面而是隔了一段距离

  • 写回答

2条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-05-23 08:54
    关注

    给img添加display: block;

    .jinpin2 ul li img {
        display: block;
        width: 100%;
    }
    
    评论

报告相同问题?

问题事件

  • 创建了问题 5月22日

悬赏问题

  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥30 用arduino开发esp32控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿