css - 将子 div 文本与父 div 对齐

Question

我目前正在做一个网站，非常简单，但这是我的第一个网站。我现在正在创建页眉，但我无法让“大页眉”的文本与“页眉”的文本对齐。

参见，http://www.dummycode.com , 用于我的网站。

我希望 Dummy Code 与 home about projects blog donate 保持一致，但它在它下面。

我的样式 CSS 位于 http://dummycode.com/style.css

我的样式表中的两个“方法”如下...

#header { 
    top:0px;
    left:50%;
    width:795px;
    height:100px; 
    box-sizing:border-box;
    margin-left:-397.5px;

    text-align:right;
    background:white;

    padding-top:35px;
    padding-bottom:35px;
    padding-right:10px;

    font-size:30px;
    word-spacing:12px;
    text-transform:lowercase;

    position:fixed;
}
#bigheader {
    padding-left:10px;
    font-size:50px;
    word-spacing:0px;
    text-align:left;
    text-transform:none;
    position:fixed;
}

我的 HTML 在这里...

<div id="header">
<div id="bigheader">
<h>Dummy Code</h>
</div>
    <a class="current" href="/">Home</a>
    <a href="./about">About</a>
    <a href="./projects">Projects</a>
    <a href="./blog">Blog</a>
    <a href="./donate">Donate</a>
</a>
</div>

Answer 1

我同意@Nick R 的观点。您应该为此使用语义代码和 float 以及无序列表。这是一个更合适的方法。

CSS

#primary-nav-container h1,
#primary-nav,
#primary-nav li {
     float: left;
     margin: 0;
     padding: 0;
}
#primary-nav-container {
     margin: 0 auto;
     width: 795px;
}
#primary-nav-container h1 {
    font-size: 50px;
    line-height: 50px;
}
#primary-nav {
     float: right;
}
#primary-nav li {
    font-size: 30px;
    line-height: 50px;
    list-style: none;
    padding: 0 6px;
}
#primary-nav a {
     text-decoration: none;
}

HTML

<header id="primary-nav-container">
     <h1>Dummy Code</h1>
     <ul id="primary-nav">
          <li>
               <a href="/">Home</a>
          </li>
          <li>
               <a href="./about">About</a>
          </li>
          <li>
               <a href="./projects">Projects</a>
          </li>
          <li>
               <a href="./blog">Blog</a>
          </li>
          <li>
               <a href="./donate">Donate</a>
          </li>
     </ul>
</header>

你甚至可以扔一个 <nav>那里的标签更具语义。