<li>
最右边的 Twitter 提要中的元素在它们之间有多余的间距,我不明白为什么 - 我找不到任何奇怪的填充或边距问题。
该站点是 Wordpress,但这是呈现的 HTML:
<li>
<h2><a href="#">Recent Tweets</a></h2>
<div id="twitter-feed">
<ul>
<li>
RT @LollyDaskal: regret is often the result of too many excuses. #leadfromwithin #leadership</li>
<li>
What you do in small doses becomes big doses in your life.</li>
<li>
RT @ThisIsSethsBlog: Seth's Blog: Two kinds of unique http://t.co/1TJ1Vuf9</li>
</ul>
</div><!-- end twitter-feed -->
<div class="forward-link">
<p><a href="https://twitter.com/growing_edge"><span style="color:#b8bf33">Follow @Growing_Edge</span></a></p>
</div><!-- end forward-link -->
</li>
和 CSS
#landing-brief #twitter-feed {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 75%;
line-height: 1.5;
color: #333333;
margin-left: -28px;
}
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 200px;
}
#landing-brief .forward-link {
position: absolute;
left: 0;
bottom: 0;
}
关于造成这种情况的原因有什么想法吗?
最佳答案
这里有两行是罪魁祸首。这两个都指定了 200px 的显式高度。我猜它来自您正在使用的模板。
/* On line 2836 in style.css */
#landing-brief #twitter-feed ul li {
height: 200px;
padding-bottom: 5px;
}
/* On line 2814 in style.css */
#landing-brief ul li {
display: inline-block;
height: 200px;
padding-bottom: 20px;
padding-right: 20px;
position: relative;
vertical-align: top;
width: 250px;
}
要修复它,您需要将 li
block 的显式高度覆盖为 auto !important;,或者完全删除 li
的高度。
我是如何得出这个结论的: 我将 Firefox 与 FireBug 一起使用,并检查了个别 Twitter 帖子。在两个样式 block 上禁用 200 像素高度后,它看起来是正确的。
如果这有效,请告诉我:-)
关于css - <li> 元素有多余的垂直间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11743421/