Question

我似乎无法找到在此网站上对齐标题和导航栏的正确方法。我知道我在这里遗漏了一些东西。

目前，导航栏位于标题下方： https://angelicanicolle.github.io/angelicanicolle/

以下是我的回购的链接：https://github.com/angelicanicolle/angelicanicolle

      <!----------------------------------
              HEADER/LOGO
  ----------------------------------->
  <div class="header">
      <div class="head-logo">
        <a href="index.html" id="head">
          <img src='img/logo.png' id="logo">
          <div class="head-text">
            <h1>Hello, my name is Angelica Nicolle.</h1>
            <h2>Designer / Photographer / Artist of sorts</h2>
          </div>
        </a>
      </div>
   </div>


  <!----------------------------------
              NAV BAR
  ----------------------------------->
      <nav>
        <ul>
          <li><a href="http://angelicanicolle.com">Work</a></li>

          <li><a href="http://angelicanicolle.com">Journal</a></li>

          <li><a href="http://angelicanicolle.com">Contact</a></li>
        </ul>
      </nav>

.header { float: left; margin: 0 0 5px 0; padding: 25px 0 0 0; position:relative; width: 100%;}

.head-logo {
margin: 0 0 0 .5%;
float: left;
padding: 20px;
overflow: visible;
white-space: nowrap;}

nav {text-align: right; margin: 0 0 10px 0; background: #fff;}

我提前感谢您的帮助！

Answer 1

考虑将<header>...</header>代码更改为<div>...</div>，并为您的<nav></nav>提供约45px的填充。像这样：

<nav style="padding-top:45px;">

难以试图对齐标题和导航栏

1 个答案: