Question

我无法将导航与我网站的左上角对齐。我知道问题是什么，它是在具有显示灵活性和合理内容中心的div中。但是我不能把它从div中移出，或者它会在整个页面之上。

我觉得这必须是一个简单的修复，但我现在无法直接思考。那么我怎么能解决这个问题呢？

我尝试在标题之外创建一个新的div，但在内部却创建了一个新的div。但

这里是site。感谢

编辑：忘了位置：固定lol

Answer 1

    <html><head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text:600" rel="stylesheet">

      <title>Pink</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    @-ms-viewport {
      width: device-width;
    }

    header {
      background-color: #fdd1d2;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      border: 4px red solid;
    }

    .nav {
      padding: 1vw;
      font-family: 'Crimson Text', serif;
      border: 1px green solid;
      height: 15vh;

    }

    .header {
      line-height: 100vh;


      background-image: url('header.jpg');
      background-size: cover;
      border: 4px blue solid;
      margin-top: 25vh;
      height: 50vh;
      width: 50vw;
      font-family: 'Crimson Text', serif;
      font-size: 1.5vw;
      /*color: #fdd1d2;*/
    }

    .text {

      /*margin-top: -.75vh;*/
    }



    ul {
      list-style: none;
    }



    a {
      font-size: 1.5vw;
      color: black;
      text-decoration: none;
      transition: color .5s ease-out;
    }

    a:hover {
      color: #ffcccd;
    }




    body {
      overflow: hidden;
    }
    li {
      list-style-type: none;
    }
    /* 6+Portrait */

    @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
      .text {
        font-size: 3vw;
      }

      @-ms-viewport {
        width: device-width;
      }



      a {
        font-size: 5vw;
        color: black;
        text-decoration: none;
        transition: color .5s ease-out;
      }

      a:hover {
        color: #ffcccd;
      }
    }
  </style>
</head>

<body cz-shortcut-listen="true">

  <header style="
    justify-content: space-between;
">

    <div class="nav" style="
    display: flex;
    justify-content: normal;
">
      <ul>
        <li><a href="pink.html">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
    <div class="header" style="
    width: 100%;
    display: flex;
    margin: 100px 300px;
">
      <div class="text" style="
    /* width: 100%; */
">
        <h1>1080 Benchmarks </h1>
      </div>
    </div>
  </header>



</body></html>

Answer 2

您可以将其添加到.nav

的CSS中

position: absolute;
left: 0;

这使它独立于其他部分 - 在小屏幕上可能会重叠，但对于中型到大型屏幕，这是最简单的解决方案。（顺便说一下：position: fixed在这种特殊情况下具有相同的效果

其他一切都涉及更改HTML。

问题对齐导航ul

2 个答案: