<li> 项目的垂直间距过大答案

【问题标题】：<li> items have excess vertical spacing<li> 项目的垂直间距过大
【发布时间】：2012-07-29 09:57:35
【问题描述】：

最右侧 Twitter 提要中的 <li> 项目之间的间距过大，我不知道为什么 - 我找不到任何奇怪的填充或边距问题。

网站是 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;
}

关于造成这种情况的任何想法？

【问题讨论】：

height 在您的 CSS 中不是 line-height，它决定了给定文本行的高度。

标签： css html-lists margin padding

【解决方案1】：

这里有两行是罪魁祸首。这两个都指定了 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 块的显式高度覆盖为 auto !important;，或者完全删除 li 的高度。

我是如何得出这个结论的：我将 Firefox 与 FireBug 一起使用并检查了个人 Twitter 帖子。禁用两个样式块的 200px 高度后，它看起来是正确的。

如果可行，请告诉我:-)

【讨论】：

谢谢，这与@Miljan Puzović 的结合帮助解决了这个问题。

【解决方案2】：

我会说这是你给“#landing-brief #twitter-feed ul li”的高度。试试这个：

#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: auto;
}

【讨论】：

【解决方案3】：

#landing-brief #twitter-feed ul li 上的 height:200px 导致了这种情况。通过完全删除高度使其更小或使其自动。

不确定您是否意识到这一点，但使用开发者控制台在 Safari/Chrome 中调试 HTML/JS/CSS 非常有用，因为您可以实时更改字段并查看浏览器将如何呈现它们。

【讨论】：

【解决方案4】：

li的高度为height:200px，改为height:auto;

【讨论】：

【解决方案5】：

#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 50px;
}

【讨论】：

【解决方案6】：

#landing-brief #twitter-feed ul li {
    padding-bottom: 5px;
    height: 200px;   <--- here is your problem.
}

使用元素检查器可以让您查看元素的定义样式来自何处。并且可以帮助您快速发现此类问题。

【讨论】：