爱编程的设计师 2022-04-30 12:48 采纳率: 97.9%
浏览 22
已结题

为什么同级元素的span和div中间有空隙

img

img


<!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="zm.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3270532_qv5sw56204p.css">
   
</head>
<body>
    <div class="home">
        <div class="mainnav">
            <div class="title_nav">
                <a href="https://www.znzmo.com/"></a>
            </div>
            <div class="container_nav">
                <a class="home_text" href="">首页</a>
                <a class="model_control" href="">3D模型</a>
                <div class="model"></div>
                <a href="">SU模型</a>
                <a href="">全球案例</a>
                <a href="">灵感图库</a>
                <a href="">材质贴图</a>
                <a href="">CAD图纸</a>
                <a href="">方案文本</a>
                <a href="">效果图</a>
            </div>
            <div class="personal_nav">
                <div class="upload_btn">
                    <img src="img/上传-2x.png" alt=""><span>上传赚钱</span> 
                </div>
                <div class="vip_btn">
                    <span class="icon-vip iconfont"></span><span class="vip">VIP</span>  
                </div>
                <a class="sign_btn" href="https://www.cool-de.com/thread-2254039-1-1.html">
                    <img src="img/签到-2x.png" alt=""><span >签到</span> 
                </a>
                <div class="login_btn">
                    <span>登录</span>
                    <span class="separator">|</span>
                    <span>注册有礼</span>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="container_background"></div>
            <div class="container_menu">
                <span class="model_3D">3D模型</span>
                <span class="model_SU">SU模型</span>
                <span class="case_world">全球案例</span>
                <span class="idea">灵感</span>
                <span class="picture">贴图</span>
                <span class="model_CAD">CAD</span>
                <span class="scheme">方案文本</span>
                <span class="software">软件</span>
                <div class="input_btn"></div>
            </div>
        </div>
    </div>

    <script src="zm.js"></script>
    
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
ol,ul{
    list-style: none;
}

.home .mainnav{
    position: relative;
    width: 1522px;
    height: 64px;
    background-color: #040000;
}
.home .mainnav>div{
    float: left;
    position: relative;
    top: 50%;
}
.home .mainnav .title_nav{
    width: 60px;
    height: 30px;
    margin-top: -15px;
    margin-left: 50px;
}
.home .mainnav .title_nav a{
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image: url(img/zhimo_logo.png);
    background-size: 100% 100%;
}
.home .mainnav .container_nav{
    width: 903px;
    height: 28px;
    margin-top: -14px;
}
.home .mainnav .container_nav .model_control:hover +.model{
    transition-duration: 0.5s;
    display: block;
}
.home .mainnav .container_nav .model{
    display: none;
    position: absolute;
    z-index: 500;
    width: 1522px;
    height: 380px;
    margin-top: 17px;
    margin-left: -110px;
    background-image: url(img/model.png);
    background-size: 100% 100%;
}
.home .mainnav .container_nav .home_text:hover{
    transition-duration: 0.5s;
    font-size: 19px;

}
.home .mainnav .container_nav a{
    display: inline-block;
    margin-left: 26px;
    font-size: 16px;
    color: #ffffff;
    line-height: 28px;
}
.home .mainnav .personal_nav{
    width: 431px;
    height: 34px;
    margin-top: -17px;
}
.home .mainnav .personal_nav>div{
    float: left;
    margin-left: 32px;
}
.home .mainnav .personal_nav>a{
    float: left;
    margin-left: 32px;
}
.home .mainnav .personal_nav .upload_btn{
    width: 96px;
    height: 34px;
    margin-left: 0px;
    font-size: 16px;
    text-align: center;
}
.home .mainnav .personal_nav .upload_btn img{
    line-height: 34px;
    height: 12px;
    width: 16px;
    margin: 0px 4px 0px 0px;
}
.home .mainnav .personal_nav .upload_btn span{
    line-height: 34px;
    color: #ffffff;
}
.home .mainnav .personal_nav .vip_btn{
    width: 45px;
    height: 34px;
}
.home .mainnav .personal_nav .vip_btn span{
    margin-right: 4px;
    line-height: 34px;
    font-size: 15px;
    color: #ffffff;
}
.home .mainnav .personal_nav .vip_btn .vip{
    margin-right: 0px;
    font-size: 16px;
}
.home .mainnav .personal_nav .sign_btn{
    width: 52px;
    height: 34px;
}
.home .mainnav .personal_nav .sign_btn img{
    line-height: 34px;
    width: 16px;
    height: 14px;
    margin-right: 4px;
}
.home .mainnav .personal_nav .sign_btn span{
    line-height: 34px;
    color: #ffffff;
}
.home .mainnav .personal_nav .login_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0px;
    width: 150px;
    height: 15px;
    margin-left: 0px;
}
.home .mainnav .personal_nav .login_btn span{
    line-height: 16px;
    font-size: 16px;
    color: #ffffff;
}
.home .mainnav .personal_nav .login_btn .separator{
    display: inline-block;
    margin: 0px 10px ;
}

.home .container{
    position: relative;
    height: 640px;
    width: 1522px;
    background-image: url(img/cHy76AMZAh.jpg);
    background-size: 100% 100%;
    overflow: hidden;
}
.home .container .container_background{
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #1b1b1b;
    opacity: 0.6;
}
.home .container .container_menu{
    position: absolute;
    display: inline-block;
    height: 32px;
    left: 300px;
    top: 300px;
    line-height: 35px;
    font-size: 0px;   
}
.home .container .container_menu span{
    display: inline-block;
    margin-right: 24px;
    line-height: 35px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}
.home .container .container_menu .model_3D{
    color: #ffffff;
}
.home .container .container_menu .input_btn{
    /* position: relative; */
    height: 64px;
    width: 840px;
    background-color: greenyellow;
}
  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 5月8日
      • 已采纳回答 4月30日
      • 修改了问题 4月30日
      • 修改了问题 4月30日
      • 展开全部

      悬赏问题

      • ¥15 postman测试正常,在代码运行报错
      • ¥15 关于#C语言#的问题,如何解决?
      • ¥20 Vs2017 Help Viewer2.3 问题
      • ¥35 基于嵌入式linux的日程管理软件
      • ¥50 如何将list字符串添加到CSV文件表头?
      • ¥15 关于#javascript#的问题:通过ajax实现的局部刷新 如何将项目打包
      • ¥15 海思uboot USB3.0无法识别
      • ¥15 无法调用库文件,自己可以找到,但编译时显示没有
      • ¥15 安装PyQt5的时候这里创建虚拟环境是哪里?具体是怎么的?能录个视频吗
      • ¥20 php程序设计题不会!求解答!