0

ライブサイト。

右端の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;
}

これを引き起こしているものについてのアイデアはありますか？

4

6 に答える 6

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

要素インスペクターを使用すると、要素の定義されたスタイルがどこから来ているかを確認できます。このような問題をすばやく見つけるのに役立ちます。

于 2012-07-31T15:23:49.077 に答える
1 
#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: 50px;
}
于 2012-07-31T15:24:01.967 に答える
1

高さ：200px#landing-brief #twitter-feed ul liがこれを引き起こしています。何かを小さくするか、高さを完全に削除して自動にします。

これを知っているかどうかはわかりませんが、開発者コンソールを使用してSafari/ChromeでHTML/JS / CSSをデバッグすると、フィールドをリアルタイムで変更してブラウザーがどのようにレンダリングするかを確認できるため、非常に便利です。

于 2012-07-31T15:24:39.267 に答える
1

ここで犯人である2つの行があります。これらは両方とも、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;
}

これを修正するには、ブロックの明示的な高さを自動的に！important;にオーバーライドするか、ブロックの高さを完全liに削除する必要があります。li

この結論に至った経緯：FireBugでFirefoxを使用し、個々のTwitter投稿を調べました。両方のスタイルブロックで200pxの高さを無効にした後、正しく見えました。

これがうまくいくかどうか教えてください:-)

于 2012-07-31T15:29:22.973 に答える
0

liの高さはheight:200px、に変更しますheight:auto;

于 2012-07-31T15:24:27.537 に答える
0

「＃landing-brief＃twitter-feedulli」に付けた高さだと思います。これを試して：

#landing-brief #twitter-feed ul li {
padding-bottom: 5px;
height: auto;
}
于 2012-07-31T15:25:33.727 に答える