Fatal编程技术网
  • html/
  • Html 如何使用CSS将文本与容器底部对齐？

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

html css

Html 如何使用CSS将文本与容器底部对齐？,html,css,alignment,Html,Css,Alignment,在下面的示例中，我希望站点名称文本“site name”和菜单文本“menu 1 menu 2 menu 3”的底部与它们所在的容器底部对齐（标题）。现在，sitename文本在其容器的底部边缘上方的像素数，而菜单文本在同一边缘上方的像素数不同。我希望两个元素位于同一条线上 看起来，使用行高可以通过不同的值进行反复试验，但结果在不同的浏览器中并不一致（例如，我可以在Safari和Chrome中刷新它们，但Firefox看起来不同）。一定有更好的办法吗 还有，除了我这样做之外，还有没有更好的方法来

在下面的示例中，我希望站点名称文本“site name”和菜单文本“menu 1 menu 2 menu 3”的底部与它们所在的容器底部对齐（标题）。现在，sitename文本在其容器的底部边缘上方的像素数，而菜单文本在同一边缘上方的像素数不同。我希望两个元素位于同一条线上

看起来，使用行高可以通过不同的值进行反复试验，但结果在不同的浏览器中并不一致（例如，我可以在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>


html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、字体、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td{
保证金：0；
填充：0；
边界：0；
}
身体{
文本对齐：居中；
}
#容器{
保证金：0自动；
边缘顶部：20px；
宽度：800px；
边框：1px纯红；
文本对齐：左对齐；
}
#标题{
浮动：左；
位置：相对位置；
宽度：100%；
边框：1px纯绿色；
}
#站点名称{
浮动：左；
左：0px；
底部：0px；
保证金：0；
填充：0；
边框：1px纯蓝色；
}
#站点名称h1{
字体大小：正常；
}       
#菜单{
位置：绝对位置；
右：0；
底部：0；
线高：1米；
浮动：对；
列表样式：无；
边框：1px纯蓝色；
}
#菜单ulli{
列表样式：无；
浮动：左；
填充：0 15px；
}
#站点名称h1{
字号：3em；
}
站点名称

    

  • 菜单1
    • 

  • 菜单2
    • 

  • 菜单3
    • 


这里有一些内容

这是页脚
您可以在
#sitename h1
上设置负边距。例如

#sitename h1 {
  font-size: 3em;
  margin-bottom: -9px;
}
棘手的部分是使其在所有浏览器中精确对齐，因为它们之间相差一个像素左右。

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

#sitename h1 {
   position: relative;
   top: 9px;
}
但是，这并不完美，因为如果使用不同的字体，间距可能会不同。这不是任何CSS属性都可以修复的（目前）。你可以考虑一个图像吗？要始终保持相同的高度？

您不需要将
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>


#标题{
浮动：左；
位置：相对位置；
宽度：100%；
边框：1px纯绿色；
高度：100px；
}
#站点名称{
位置：绝对位置；
浮动：左；
左：0px；
底部：0px；
保证金：0；
填充：0；
边框：1px纯蓝色；
字体大小：正常；
字号：3em；
}     
#菜单{
位置：绝对位置；
右：0；
底部：0；
线高：1米；
浮动：对；
列表样式：无；
边框：1px纯蓝色；
}
#菜单ulli{
列表样式：无；
浮动：左；
填充：0 15px；
}
站点名称

    

  • 菜单1
    • 

  • 菜单2
    • 

  • 菜单3
    •
您是否应用了任何类型的重置样式？每个浏览器都有不同的元素（如标题和列表）的填充和边距默认值。如果您在样式表的开头重置了所有内容，那么将更容易排列所有内容

Eric Meyer的重置css是一个很好的起点：

如果可以使用视口宽度，那么对于任何屏幕大小都可以很好地完成

#sitename h1 {
  font-size: 9vw;
  margin-bottom: -2.2vw;
}
这很有用，因为我在背景中将文本用作图形元素。通常情况下，您不希望使用vw设置
字体大小（但通常您也不希望它与下面的元素齐平）。
此处的布局-是的，不幸的是，它也存在不同浏览器的相同问题。您可以通过为这些样式设置特定于浏览器的样式表来解决此问题。它会给你一些开销，但你会得到你努力追求的布局。有趣。感谢您指出h1是它自己的块级元素。不知道我为什么要包装它。有趣的是，它似乎比线高度操作更有效。firefox仍然是与其他浏览器不匹配的浏览器（好吧，我还没有尝试IE），但它与其他浏览器的差异比以前小了。因此，我可以找到一个中间地带，在这三种浏览器中，事情并不完全一致，看起来都很好。不过，还是希望有办法做到这一点。我将继续查找，如果发现任何内容，我将向您报告。如果您将标题的字体大小设置为像素而不是em，则可以为其设置负的底部边距（以像素为单位），这样在跨浏览器时看起来应该是一致的。