Html 如何使我的徽标和标语与我的导航一致？

我一直在做一个下拉式导航，我已经接近我喜欢的方式，但我很难弄清楚如何让徽标（实际上只是h1文本）和标语与我的导航对齐

徽标和标语的html为：

<div class="logo grid_5 omega">
    <ul>
      <li><a href="default.html"><h1>karma.</h1></a></li>
      <li><p id="tagline">A stop motion animation</p></li>
    </ul>
 </div>

导航的html是：

<nav class="grid_7 omega">
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="design.html">Process</a>
                  <ul>
                    <li><a href="#">Models</a></li>
                    <li><a href="#">Backgrounds</a></li>
                    <li><a href="#">Animation</a></li>
                    <li><a href="#">Post-production</a></li>                
                  </ul>
              </li>
              <li><a href="style.html">Style</a></li>
              <li><a href="reflection.html">Reflection</a></li>            
           </ul>
        </div>

  </nav>

但是，正如您所看到的：有点不对劲：

---

给你的主要保险商提供一个id，并提供一些最高保证金

HTML

---

我想你在找这个

html

<div class="logo grid_5 omega">
    <ul>
      <li><h1><a href="default.html">karma.</a></h1></li>
      <li><p id="tagline">A stop motion animation</p></li>
    </ul>
 </div>

<nav class="grid_7 omega navigation">
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="design.html">Process</a>
                  <ul>
                    <li><a href="#">Models</a></li>
                    <li><a href="#">Backgrounds</a></li>
                    <li><a href="#">Animation</a></li>
                    <li><a href="#">Post-production</a></li>                
                  </ul>
              </li>
              <li><a href="style.html">Style</a></li>
              <li><a href="reflection.html">Reflection</a></li>            
           </ul>
        </div>

  </nav>

---

您是否尝试将类似的线高度设置为h1和nav？能否添加一个屏幕截图，您在看什么for@SonasishRoy如果你点击imgur链接，你可以看到我的标题截图。基本上我想要的标志和标语（当前位于徽标下方，显示在徽标旁边，两者都与导航完全对齐。是的，谢谢，这使标语与导航对齐，但徽标仍然位于较低的位置。我知道我可以使用position:relative并将其显示出来，但它似乎有点粗糙。获得我的最佳方式是什么t up？这是现在的样子。如果你发布你的代码，对我编辑代码很有帮助的是我的代码。我已经破解了它，但仍然很奇怪。我想可能是chrome为h1标签定义了默认css。而且你的logo li结构应该是

nav ul ul {
    display:none;
}

    nav ul li:hover > ul {
        display: block;
    }

nav ul {
    background: #FFF; 
    padding: 0 20px;
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }

nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;
        position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

<nav class="grid_7 omega">
    <ul id="navi">
        <li><a href="about.html">About</a></li>
        ...
    </ul>
</nav>

ul#navi{
    margin:30px 0 0 0; /*adjust your top margin*/
}

<div class="logo grid_5 omega">
    <ul>
      <li><h1><a href="default.html">karma.</a></h1></li>
      <li><p id="tagline">A stop motion animation</p></li>
    </ul>
 </div>

<nav class="grid_7 omega navigation">
            <ul>
              <li><a href="about.html">About</a></li>
              <li><a href="design.html">Process</a>
                  <ul>
                    <li><a href="#">Models</a></li>
                    <li><a href="#">Backgrounds</a></li>
                    <li><a href="#">Animation</a></li>
                    <li><a href="#">Post-production</a></li>                
                  </ul>
              </li>
              <li><a href="style.html">Style</a></li>
              <li><a href="reflection.html">Reflection</a></li>            
           </ul>
        </div>

  </nav>

.header.grid_12.omega {
    margin-top:40px;
    box-shadow:0 3px 10px #222;
    background:#FFFFFF;
}

.logo.grid_5.omega {
    float:left;
}
.logo.grid_5.omega li{
    float: left;
    line-height: 40px;
    list-style-type: none;
    margin-right: 25px;
    padding-top: 14px;
}

.navigation{
    float:left;
}
nav ul ul {
    display:none;
}

    nav ul li:hover > ul {
        display: block;
    }

nav ul {
    background: #FFF; 
    padding: 0 20px;
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #4b545f;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }