我有一个页脚,两个左浮动 div 并排放置;一侧用于一些文本,另一侧用于一些链接。它们都链接到相同的 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 K H O L O D O V</span> · Real Estate Broker
</p>
</div>
<div class="footerr">
<navigation>
<a class="grey footer" href="index.html">Home </a><a class="grey footer" href="listings.html"> Listings </a><a class="grey footer" href="approach.html"> Approach </a><a class="grey footer" href="press.html"> Press </a><a class="grey footer" href="contact.html"> 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;}
最佳答案
与右侧的链接相比,不同的字体系列/大写可能会使左侧的文本稍微偏移。
将 line-height
属性添加到 div.footerl
以将文本向下推一点:
div.footer1 {
line-height: 1.5em;
}
关于HTML CSS Footer : Exact Same specifications, 但垂直对齐方式不同;为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28440562/