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

Question

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

在下面的示例中，我希望站点名称文本“ site name”的底部和菜单文本“ menu 1 menu 2 menu 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sam*_*abi 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，8 月前
查看次数：	6359 次
最近记录：	7 年，6 月前