如何使用CSS將文本刷新與容器底部對齊？

在下面的例子中，我想讓站點名稱文本的底部「站點名稱」和菜單文本「菜單1菜單2菜單3」的底部與它們所在容器的底部對齊）。就像現在一樣，sitename文本是容器底部邊緣上方的像素數量，而菜單文本在相同邊緣上方的像素數量不同。我希望兩個元素都坐在同一條線上。如何使用CSS將文本刷新與容器底部對齊？

看來，使用行高可以通過試驗和錯誤使用不同的值來降低瀏覽器的瀏覽器結果（例如，我可以讓它們在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>

來源

2010-07-04 mix

佈局在這裏 - http://jsfiddle.net/W3ECa/ – 2010-07-04 22:07:28

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

來源

2010-07-04 23:48:53

有趣。感謝您指出h1是它自己的塊級元素。不知道爲什麼我要包裝它。有趣的是，它似乎對線條高度操作有一些好處。 Firefox仍然是與其他瀏覽器不匹配的瀏覽器（當然，我還沒有試過IE），但它與其他瀏覽器的差異比以前少了。因此，我可以找到一箇中間地帶，在這三個瀏覽器中，事物並不完全一致，看起來相當不錯。仍然希望可能有辦法做到這一點，但。如果我找到任何東西，我會繼續尋找，並會回報。 – mix 2010-07-05 02:18:40

如果您將標題的字體大小設置爲像素而非em，則可以給它一個負向底部邊距（以像素爲單位），它應該看起來像跨瀏覽器一樣。 – 2010-07-05 11:01:42

您可以在#sitename h1上設置負值保證金。例如。

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

棘手的部分是讓它在所有瀏覽器中精確對齊，因爲它與它們之間的像素大小不同。

來源

2010-07-04 22:39:02

是的，不幸的是它具有跨瀏覽器不同的同樣的問題。 – mix 2010-07-04 22:47:38

您可以通過爲這些樣式提供瀏覽器特定的樣式表來避開它。它會給你一些開銷，但你會得到你爭取的佈局。 – 2010-07-05 04:53:09

我建議相對於目前它是，像這樣的網站名稱定位：

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

然而，這並不是完美的，因爲如果使用不同的字體，間距可能有所不同。這不是可以用任何CSS屬性（當前）解決的問題。你可能會考慮一個圖像？始終保持相同的高度？

來源

2010-07-04 22:53:58

你有什麼樣的復位風格被應用？每個瀏覽器在標題和列表等元素上都有不同的默認值，用於填充&邊距。如果您在樣式表的開頭重新設置所有內容，則可以更輕鬆地將所有內容排成一行！

Eric Meyer的重置CSS是一個良好的開端：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

來源

2010-07-05 13:41:08 DHuntrods

如何使用CSS將文本刷新與容器底部對齊？

回答

相關問題