Question

我想在我的标题中包含一个导航栏，但是为了确保当我缩小窗口时它不会与我的标题重叠，我将我的标题变成了一个块对象，并修复了它。

现在我想将导航栏移动到标题的右侧，但是当我使用float，或者position：relative或absolute时，我发现当我缩小窗口或重叠时，我的导航会退出标题。我不知道在缩小窗口时我可以使用什么技术来确保我的标题增长以覆盖其中的所有代码。

实施例：这是我标题中的所有内容：

<header>
       <div class="header-div">
         <h1 class="header-text">WELCOME TO THE <br> HAUNTED MANSION!</h1>
       </div>

       <nav class="home-menu">
         <ul class="home-ul">
            <li class="home-btn"><a href="#">HOME</a></li>
            <li class="home-btn"><a href="#">ABOUT</a></li>
            <li class="home-btn"><a href="#">CONTACT</a></li>
        </ul>
       </nav>
    </header>

目标： That's the position I want for my nav bar

当我使用position relative或absolute时，当我缩小窗口时，导航会被切断：

nav.home-menu{
    position:relative;
    left:600px;
    bottom: 70px;
}

使用float我的导航会离开标题：

nav.home-menu{
    float: right;
}

请告诉我移动此导航的最佳方法是让它在移动时响应。

Answer 1

你可以使用flexbox，它现代而实用。

不要使用我的代码，从中激励自己，但要改进它！

https://codepen.io/anon/pen/NaVaRP

   .header-div {
      width: 60%;
      margin: 0 auto;
      background-color: red;
    }
    .home-ul li {
     display: inline;
    }
    .home-ul li .header-text {
      float: left;
    }
    .home-ul li a {

      display: flex;
      margin-top: 4%;
      padding: 8px;
       color: blue;
      float: right;
    }

Answer 2

这应该可行，只需更换你的字体和图像，让它再次吓人！：d

body {
    margin: 0;
  }

  header {
    width: 1000px;
    height: 10rem;
    margin: 0 auto;
    background: gray;
    border-bottom: solid 4px red;
  }

  header,
  .header-div,
  .header-menu {
    box-sizing: border-box;
  }

  .header-div,
  .home-menu {
    width: 50%;
    height: 100%;
    float: left;
    color: red;
  }

  .header-div {
    line-height: 3.6rem;
    padding-left: 2rem;
  }

  .home-menu {
    float: right;
  }

  .home-ul {
    list-style: none;
  }

  .home-btn {
    float: left;
    width: 8rem;
    height: 8rem;
  }

  .home-btn > a {
    display: block;
    background: black;
    color: red;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 0 1rem;
    margin: 2.5rem 0.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    box-shadow: 0 4px 0 red;
    border-radius: 0.75rem;
  }

<header>
   <div class="header-div">
     <h1 class="header-text">WELCOME TO THE <br> HAUNTED MANSION!</h1>
   </div>

   <nav class="home-menu">
     <ul class="home-ul">
        <li class="home-btn"><a href="#">HOME</a></li>
        <li class="home-btn"><a href="#">ABOUT</a></li>
        <li class="home-btn"><a href="#">CONTACT</a></li>
    </ul>
   </nav>
</header>

当我把窗户缩小时，我不能让我的div留在我的标题内

2 个答案: