定位徽标和导航链接未对齐
问题截图:
黄色块是徽标和蓝色框是导航链接(我已将其删除)。 我想对齐底部的链接,以便它们粘在正文内容的顶部(白框)。 我该怎么做? 这是相关的 CSS 和 HTML。
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"><a href="/"></a></div>
<div id="nav">
<ul>
<li><a href="#">*****</a></li>
[...]
</ul>
</div>
</div>
提前致谢。
Screenshot of the problem:
The yellow block is the logo and the blue box is the nav links (I have blanked them out). I would like to align the links at the bottom so they are stuck to the top of the body content (white box). How would I do this?
Here is the relevant CSS and HTML.
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"><a href="/"></a></div>
<div id="nav">
<ul>
<li><a href="#">*****</a></li>
[...]
</ul>
</div>
</div>
Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
尝试这个。 似乎可以在 Firefox/Mac 中使用
Try this. Seems to work in Firefox/Mac
左下方? 如果是这样 - 首先在 #nav 块上设置
clear: Both;
。除此之外,我不太明白你的问题——你能把你想要的样子做成一张 jpg 吗?
Bottom left? If so - start by setting
clear: both;
on your #nav block.Other than that, I don't really understand your question - can you make a jpg of how you'd like it to look?
您可以像这样使用绝对定位:
在这种方法中,您可以使用与“header”划分相关的绝对定位来制作“nav”。
You can use absolute positioning like this:
in this method, you make "nav" with absolute positioning related to "header" division.