Question

在以下示例中，我希望站点名称文本“站点名称”的底部和菜单文本“菜单1菜单2菜单3”的底部与他们所在的容器底部齐平（头）。就像现在一样，网站名称文本在容器的下边缘上方是一些像素，而菜单文本在同一边缘上方的像素数不同。我希望两个元素都坐在同一条线上。

似乎使用line-height可以通过不同值的试验和错误将其推下来，但结果在浏览器中并不一致（例如我可以在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>

Answer 1

您无需将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>

Answer 2

您可以在#sitename h1上设置负余量。 E.g。

#sitename h1 {
  font-size: 3em;
  margin-bottom: -9px;
}

棘手的部分是让它在所有浏览器中准确对齐，因为它们之间的像素大不相同。

Answer 3

我建议将网站名称相对于目前的位置进行定位，如下所示：

#sitename h1 {
   position: relative;
   top: 9px;
}

但是，这并不完美，因为如果使用不同的字体，则间距可能不同。这不是可以用任何CSS属性（当前）修复的东西。你可以考虑一个图像？要始终保持相同的高度吗？

Answer 4

您是否应用了任何类型的重置样式？每个浏览器都有不同的填充和默认值。标题和列表等元素的边距。如果您在样式表的开头重置了所有内容，那么就可以更轻松地排列所有内容！

Eric Meyer的重置css是一个很好的起点：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 5

如果您可以使用视口宽度，那么在任何屏幕尺寸下都可以做到很好。

#sitename h1 {
  font-size: 9vw;
  margin-bottom: -2.2vw;
}

这很有用，因为我将文本用作背景中的图形元素。通常，您不想使用vw来设置font-size（但是通常您也不想让它与下面的元素齐平）。

如何使用CSS将文本与容器底部对齐？

5 个答案: