我目前正在开发一个网站,非常简单,但我的第一个。我正在创建标题,我不能让我的“大标题”文本与我的“标题”文本一致。
请参阅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>
答案 0 :(得分: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>
标签,以获得更多的语义。
答案 1 :(得分:0)
不要使用position: fixed
来定位“虚拟代码”标头,只需使用display: inline-block
即可。然后,您可以在标题的所有元素上使用vertical-align: middle
来根据需要对齐它们
答案 2 :(得分:0)
由于您使用了固定位置,因此您只需提供#bigheader
和top
值。
#bigheader {
// current css goes here
top: 30px;
}