HTML CSS頁腳：完全相同的規格，但不同的垂直對齊;爲什麼？

我有一個頁腳，兩個浮動左邊的div彼此相鄰;一方爲一些文本，另一方爲一些鏈接。它們都鏈接到相同的CSS，具有完全相同的規格，但左側文本低於右側鏈接。HTML CSS頁腳：完全相同的規格，但不同的垂直對齊;爲什麼？

我已經從一堆東西中刪除了填充和邊距以及邊框，但我似乎無法弄清楚。

感謝您的幫助，這是我的代碼：

HTML

<!--FOOTER--> 
    <footer> 
     <hr class="plain bgcolor black"> 
     <div class="footerl"> 
      <p class="grey footer"> 
      <span style="font-family:Bodoni MT W01 Bold, Times New Roman, serif">B O R I S &nbsp; K H O L O D O V</span> &nbsp;&#183;&nbsp; Real Estate Broker 
      </p> 
     </div> 
     <div class="footerr"> 
      <navigation> 
       <a class="grey footer" href="index.html">Home&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="listings.html">&nbsp;&nbsp;&nbsp;Listings&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="approach.html">&nbsp;&nbsp;&nbsp;Approach&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="press.html">&nbsp;&nbsp;&nbsp;Press&nbsp;&nbsp;&nbsp;</a><a class="grey footer" href="contact.html">&nbsp;&nbsp;&nbsp;Contact</a> 
      </navigation> 
     </div> 
     <hr class="plain bgcolor black"> 
    </footer> 
    <!--FOOTER-->

CSS

navigation{ 
    padding: 0px; 
    margin: 0px; 
    border: 0px; 
    } 

footer{ 
    padding: 0px; 
    margin: 0px; 
    border: 0px;} 

div.footerl{ 
    height: 25px; 
    width: 500px; 
    float: left; 
    padding-left: 0px; 
    padding-right: 0px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin: 0px; 
    } 

div.footerr{ 
    height: 25px; 
    width: 500px; 
    float: left; 
    text-align: right; 
    padding-left: 0px; 
    padding-right: 0px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    margin: 0px; 
    } 

.footer{ 
    font-family: "DIN Next W01 Light", Helvetica, Arial, sans-serif; 
    font-size:14px; 
    margin: 0px; 
    padding: 0px; 
    text-decoration:none;}

來源

2015-02-10 Alex Banman

不同的字體家族/市值可抵消左側略微比文本右邊的鏈接。

一個line-height屬性添加到div.footerl到文本推了一點：

div.footer1 { 
    line-height: 1.5em; 
}

來源

2015-02-10 20:24:59 user3781632

謝謝，其合理的臨時修復，對於Firefox和Chrome的工作，但將文本太遠，Safari瀏覽器....其實它看起來更好的整體。我希望瀏覽器編碼是標準化的。感謝您的回覆！ – 2015-02-10 20:27:29

您也可以嘗試向'div.footer1'添加輕微的填充而不是線條高度。希望它在所有瀏覽器中更加兼容。 – user3781632 2015-02-10 20:30:50

剛剛嘗試過，由於某些原因，它在Safari上比線高更成問題。：/ – 2015-02-10 20:38:09

嗯。我打開了你的代碼，並且這兩個文本都在一個層次上。你應該嘗試line-height;或che你的風格。

enter image description here

來源

2015-02-10 20:30:59 GroD

好點，我應該特別尋找什麼？謝謝。 – 2015-02-10 20:39:40

HTML CSS頁腳：完全相同的規格，但不同的垂直對齊;爲什麼？

回答

相關問題