问题对齐导航 ul答案

【问题标题】：Issue aligning navigation ul问题对齐导航 ul
【发布时间】：2017-09-25 06:44:49
【问题描述】：

我无法将导航对齐到网站的左上角。我知道问题出在哪里，它在一个带有 display flex 和 justify 内容中心的 div 中。但是我不能把它移出 div 否则它会在整个页面之上。

我觉得这一定是一个简单的解决方法，但我现在想不通。那么我该如何解决这个问题呢？

我尝试在标题之外创建一个新 div，在内部创建一个，但无法修复它。

这是site。谢谢

编辑：忘记位置：固定大声笑

【问题讨论】：

标签： html css alignment navbar

【解决方案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>

【讨论】：

【解决方案2】：

您可以将其添加到 .nav 的 CSS 中

position: absolute;
left: 0;

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

其他一切都涉及更改您的 HTML。

【讨论】：