0

我目前正在做一个网站，很简单，但我的第一个。我现在正在创建标题，但无法让“大标题”的文本与“标题”的文本对齐。

请参阅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>
4

3 回答 3

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>在其中添加一个标签以增加语义。

于 2013-06-21T22:09:56.797 回答
0

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

于 2013-06-21T21:37:09.763 回答
0

由于您使用了固定位置，因此您可以给予#bigheader和top重视。

#bigheader {
    // current css goes here
    top: 30px;
}
于 2013-06-21T21:40:36.547 回答