夜雨&（* 2022-01-19 12:12 采纳率: 88.9%
浏览 43
已结题

为什么我把<div class="QR-code"></div>标签放到a标签外面就无法正常显示，而放到a标签里面则可以正常显示？

img

img

img


/* 设置顶部样式 */
.top-wrapper {
  height: 38px;
  background-color: #333;
}
/* 为顶部导航栏的字体设置样式 */
.top-wrapper a {
  color: #bbb;
  text-decoration: none;
}
.inner-wrapper a:hover {
  color: #fff;
}
/* 设置内部容器样式 */
.inner-wrapper {
  width: 1226px;
  margin: 0 auto;
  line-height: 38px;
}
/* 设置左侧导航栏 */
.inner-wrapper .left-content li {
  float: left;
}
.app{
  position: relative;
}
.QR-code{
  height:148px;
  width:124px;
  background-color:orange;
  position:absolute;
  top:0px;
  left:0px;
 
}
/* 设置右侧导航栏 */
.inner-wrapper .right-content {
  float: right;
}
.inner-wrapper .right-content li {
  float: left;
}
/* 为"消息通知"单独设置样式 */
.inner-wrapper .right-content li:nth-child(5) {
  margin-left: 4px;
  margin-right: 24px;
}
/* 设置分割线样式 */
.inner-wrapper .cutting-line {
  height: 11px;
  width: 2px;
  background: linear-gradient(to right, #373c42, #3c3733);
  margin: 13px 7px;
}
/* 设置购物车样式 */
.shop-cart{
  padding:0 18.69px;
}
.fa-shopping-cart{
  margin-right:5px;
}
.shop-cart:hover{
  background-color: #fff;
}
.shop-cart a:hover{
  color: #FF6700;
}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>小米商城</title>
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/fa/css/all.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/base.css" />
  </head>
  <body>
    <header>
      <!-- 设置外部顶部容器 -->
      <div class="top-wrapper">
        <!-- 设置内部容器 -->
        <div class="inner-wrapper">
          <div class="left-content">
            <ul>
              <li>
                <a href="javascript:;"
                  >小米商城
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >MIUI
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >loT
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >云服务
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >天星数科
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >有品
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >小爱开放平台
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >企业团购
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >资质证照
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >协议规则
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li class="app">
                <a href="javascript:;"
                  >下载app
                  <div class="QR-code"></div>
                  <li class="cutting-line"></li>
                </a>
              </li>
              <li>
                <a href="javascript:;"
                  >智能生活
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;">Select Location </a>
              </li>
            </ul>
          </div>
          <div class="right-content">
            <ul>
              <li>
                <a href="javascript:;"
                  >登录
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;"
                  >注册
                  <li class="cutting-line"></li
                ></a>
              </li>
              <li>
                <a href="javascript:;">消息通知 </a>
              </li>
              <li class="shop-cart">
                <a href="javascript:;"
                  ><i class="fas fa-shopping-cart"></i>购物车&nbsp;&nbsp;(0)
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
  </body>
</html>
  • 写回答

1条回答 默认 最新

  • 前端互助会 2022-01-19 12:59
    关注

    看了一下你的代码：错误原因是：ui和li 是配套的，你代码中li 里面套用了 li 就导致标签首尾闭合错乱了；把li 里面套用的li 改成div 就可以了；
    修改过之后代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>小米商城</title>
    <!--    <link rel="stylesheet" href="/css/reset.css" />-->
    <!--    <link rel="stylesheet" href="/fa/css/all.css" />-->
    <!--    <link rel="stylesheet" href="../css/index.css" />-->
    <!--    <link rel="stylesheet" href="../css/base.css" />-->
    <style>

        /* 设置顶部样式 */
        .top-wrapper {
            height: 38px;
            background-color: #333;
        }

        /* 为顶部导航栏的字体设置样式 */
        .top-wrapper a {
            color: #bbb;
            text-decoration: none;
        }

        .inner-wrapper a:hover {
            color: #fff;
        }

        /* 设置内部容器样式 */
        .inner-wrapper {
            width: 1226px;
            margin: 0 auto;
            line-height: 38px;
        }

        /* 设置左侧导航栏 */
        .inner-wrapper .left-content li {
            float: left;
        }

        .app {
            position: relative;
        }

        .QR-code {
            height: 148px;
            width: 124px;
            background-color: orange;
            position: absolute;
            top: 0px;
            left: 0px;

        }

        /* 设置右侧导航栏 */
        .inner-wrapper .right-content {
            float: right;
        }

        .inner-wrapper .right-content li {
            float: left;
        }

        /* 为"消息通知"单独设置样式 */
        .inner-wrapper .right-content li:nth-child(5) {
            margin-left: 4px;
            margin-right: 24px;
        }

        /* 设置分割线样式 */
        .inner-wrapper .cutting-line {
            height: 11px;
            width: 2px;
            background: linear-gradient(to right, #373c42, #3c3733);
            margin: 13px 7px;
        }

        /* 设置购物车样式 */
        .shop-cart {
            padding: 0 18.69px;
        }

        .fa-shopping-cart {
            margin-right: 5px;
        }

        .shop-cart:hover {
            background-color: #fff;
        }

        .shop-cart a:hover {
            color: #FF6700;
        }

    </style>
</head>
<body>
<header>
    <!-- 设置外部顶部容器 -->
    <div class="top-wrapper">
        <!-- 设置内部容器 -->
        <div class="inner-wrapper">
            <div class="left-content">
                <ul>
                    <li>
                        <a href="javascript:;"
                        >小米商城
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >MIUI
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >loT
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >云服务
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >天星数科
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >有品
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >小爱开放平台
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >企业团购
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >资质证照
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;">协议规则
                    <div class="cutting-line"></div>
                    </a>

                    </li>
                    <li class="app">
                        <a href="javascript:;">下载app
                      <div class="cutting-line"></div>
                      </a>
                      <div class="QR-code"></div>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >智能生活
                    <div class="cutting-line"></div
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;">Select Location </a>
                    </li>
                </ul>
            </div>
            <div class="right-content">
                <ul>
                    <li>
                        <a href="javascript:;"
                        >登录
                    <li class="cutting-line"></li
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;"
                        >注册
                    <li class="cutting-line"></li
                    >
                    </a>
                    </li>
                    <li>
                        <a href="javascript:;">消息通知 </a>
                    </li>
                    <li class="shop-cart">
                        <a href="javascript:;"
                        ><i class="fas fa-shopping-cart"></i>购物车&nbsp;&nbsp;(0)
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>
</body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 1月27日
  • 已采纳回答 1月19日
  • 创建了问题 1月19日

悬赏问题

  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥50 opencv4nodejs 如何安装
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip，java获取真实ip
  • ¥15 eda：门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥15 复杂网络，变滞后传递熵，FDA