<style>元素在视觉上扰乱了我的<body>中的div是怎么回事？-堆栈溢出

顺晟科技

2022-10-19 14:00:16

114

当我运行此代码时，在我的live服务器上没有出现关于在div中eachother顶部显示链接的问题。

但是当我取消对样式部分的注释时，我的列表突然分散在巨大的单个容器周围。我不明白这怎么可能。有人能澄清一下我忘记了什么上下文/语法吗？

我这周才开始学习如何编写代码，所以请原谅我。

顺晟科技：

问题是边值上限:100VH；用于标记。

您的链接正在传播，因为您给出了边距上限:100VH。因此，每个a标签的边距为100VH。问题出现在样式标记中的以下位置。

   <!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>DOM about</title>
        <!-- <style>
            .red {
            background: red;
            color: white;
            text-transform: uppercase;
            font-size: 2rem;
          }
          .blue {
            background: blue;
            color: white;
            text-transform: capitalize;
            font-size: 2rem;
          }
          .title {
            background: blue;
            color: white;
            font-size: 3rem;
            text-transform: capitalize;
          }
          .btn {
            background: #f15025;
            color: white;
            font-size: 1.2rem;
            border: none;
          }
          a {
            display: inline-block;
            margin-top: 100vh;
          }
        </style> -->
      </head>
      <body>
        <div class="container">
          <ul class="list-items">
            <li class="item"><a href="#" class="link">link</a></li>
            <li class="item"><a href="#" class="link">link</a></li>
            <li class="item"><a href="#" class="link">link</a></li>
          </ul>
        </div>
        <!-- Javascript -->
        <script src="app.js"></script>
      </body>
    </html>

上一篇：HTML-在移动视图上，仅在特定页面下一篇：html内容溢出滚动条,HTML-

网站建设

Html

<style>元素在视觉上扰乱了我的<body>中的div是怎么回事？-堆栈溢出