在下面的示例中，我希望站点名称文本“站点名称”的底部和菜单文本“菜单1菜单2菜单3”的底部与他们所在的容器（标题）的底部齐平。就像现在一样，网站名称文本在容器的下边缘上方是一些像素，而菜单文本在同一边缘上方的像素数不同。我希望两个元素都坐在同一条线上。
似乎使用行高可以通过不同值的试验和错误将其推下来，但结果在浏览器中并不一致（例如，我可以在Safari和Chrome中将它们刷新，但Firefox看起来不同）。一定有更好的方法？
此外，有没有更好的方法强制菜单进入右下角而不是我的方式？
谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}
body {
text-align: center;
}
#container {
margin:0 auto;
margin-top:20px;
width:800px;
border:1px solid red;
text-align: left;
}
#header {
float:left;
position:relative;
width:100%;
border:1px solid green;
}
#sitename {
float:left;
left:0px;
bottom:0px;
margin:0;
padding:0;
border:1px solid blue;
}
#sitename h1 {
font-weight: normal;
}
#menu {
position:absolute;
right:0;
bottom:0;
line-height:1em;
float:right;
list-style: none;
border:1px solid blue;
}
#menu ul li {
list-style: none;
float:left;
padding: 0 0 0 15px;
}
#sitename h1 {
font-size: 3em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="sitename">
<h1>site name</h1>
</div>
<div id="menu">
<ul id="nav">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</div>
<div id="content">
<p>here is some content.</p>
</div>
<div id="footer">
<p>here is the footer.</p>
</div>
</div> <!-- container -->
</body>
</html>
你不需要将你的h1包裹在div中。它已经是一个块级元素。试试这段代码：
<!-- CSS -->
#header {
float:left;
position:relative;
width:100%;
border:1px solid green;
height: 100px;
}
#sitename {
position: absolute;
float:left;
left:0px;
bottom:0px;
margin:0;
padding:0;
border:1px solid blue;
font-weight: normal;
font-size:3em;
}
#menu {
position:absolute;
right:0;
bottom:0;
line-height:1em;
float:right;
list-style: none;
border:1px solid blue;
}
#menu ul li {
list-style: none;
float:left;
padding: 0 0 0 15px;
}
<!-- HTML -->
<div id="header">
<h1 id="sitename">site name</h1>
<div id="menu">
<ul id="nav">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
</div>
您可以在#sitename h1上设置负余量。例如。
#sitename h1 {
font-size: 3em;
margin-bottom: -9px;
}
棘手的部分是使它在所有浏览器中准确对齐，因为它们之间的像素大不相同。
我建议将网站名称相对于目前的位置，如下所示：
#sitename h1 {
position: relative;
top: 9px;
}
但是，这并不完美，因为如果使用不同的字体，则间距可能不同。这不是可以用任何CSS属性（当前）修复的东西。你可以考虑一个图像？要始终保持相同的高度？
您是否应用了任何类型的重置样式？每个浏览器对标题和列表等元素的填充和边距都有不同的默认值。如果您在样式表的开头重置所有内容，那么就可以更轻松地排列所有内容！
Eric Meyer的重置css是一个很好的起点：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
如果你可以使用视口宽度，它可以很好地完成任何屏幕尺寸。
#sitename h1 {
font-size: 9vw;
margin-bottom: -2.2vw;
}
这很有用，因为我在后台使用文本作为图形元素。通常你不想用vw设置你的font-size（但通常你也不希望它与下面的元素齐平）。