Question

我目前正在开发一个网站，非常简单，但我的第一个。我正在创建标题，我不能让我的“大标题”文本与我的“标题”文本一致。

请参阅http://www.dummycode.com，了解我的网站。

我希望Dummy Code与home about projects blog donate对齐，但它低于它。

我的样式表中的两个“方法”位于......

之下

#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.你应该使用语义代码并浮动以及无序列表。这是一种更恰当的方法。

<强> 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>标签，以获得更多的语义。

Answer 2

不要使用position: fixed来定位“虚拟代码”标头，只需使用display: inline-block即可。然后，您可以在标题的所有元素上使用vertical-align: middle来根据需要对齐它们

Answer 3

由于您使用了固定位置，因此您只需提供#bigheader和top值。

#bigheader {
    // current css goes here
    top: 30px;
}

将子div文本与父div对齐

3 个答案: