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页脚：完全相同的规格，但不同的垂直对齐;为什么？

回答

相关问题