Question

这里第一次，我只使用HTML和CSS一周，所以请耐心等待。我正在创建一个网站布局，使用position: absolute作为徽标，以便出于风格原因让它坐在下面的另一个div上。我能够做到这一点，但并不真正符合响应式网页设计。在右侧，我有一个导航，并在调整大小时导致徽标和导航崩溃。

如何在调整大小时将徽标移动到导航上方，但在桌面上保持正确定位？请在下面找到我的代码片段以及我之前在此处使用过的jsfiddle链接。

道歉，如果我做错了，感谢先进。

https://jsfiddle.net/d9e4gtoj/

＆＃13;

.col-12 {
  width: 100%;
}

[class*="col-"] {
    padding: 15px;
    border: 2px solid red;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
  }

.container {
    max-width: 99%;
    margin: 22px;
    margin: 0 auto;
    text-align: center;
}

.nav {
    margin-right: -4px;
    font-family: "Lato";
}

.top-nav {
    text-align: right;
    margin-right: 5px;
    padding-top: 52px;
}

.top-nav li {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;

}

.top-nav {
    text-align: right;
    margin-right: 5px;
    padding-top: 52px;
}
.logo {
    font-size: 82px;
    font-family: 'Suez One', serif;
    color: #3F3A46;
    position: absolute;
    padding-left: 100px;
    margin-top: 40px;
}

ul {
  list-style: none;
}

＆＃13;

  <header class="container">
          <h1 class="logo"><a href="index.html">Logo</a></h1>
      <nav class="nav top-nav">
        <ul>
          <li><a href="menu.html">Menu1</a></li>
          <li><a href="menu.html">Menu2</a></li>
          <li><a href="menu.html">Menu3</a></li>
          <li><a href="menu.html">Menu4</a></li>
        </ul>
      </nav>
    </header>
      <section class="container">
        <div class="col-12 banner">
        <h2>Tagline text. Tagline text.<br> Tagline text. Tagline text.</h2>
        </div>
      </section>

＆＃13;

Answer 1

@media (max-width: 800px) {

  .logo,
  .top-nav {
    margin: 0;
    padding: 0;
  }
  .logo {
    position: relative;
  }

  .top-nav {
    text-align: center;

    }

}

这解决了我的问题。张贴帮助其他人。

徽标（h1）具有在调整大小时在导航上方移动的绝对位置

1 个答案: