1

ワードプレスのプラグインから最近の投稿と画像のリストをスタイリングしています。ワードプレスのセクションがあることは知っていますが、私の質問は、このリストのスタイルを設定する方法についてアドバイスを受けることです.

ウェブサイトはこちら

これが今の姿です。

ここに画像の説明を入力

これは私のCSSです

.advanced-recent-posts { 
        list-style-type: none; 
    }

    .advanced-recent-posts li { 
        font-size: .7em; 
        font-weight: bold; 
        line-height: 20px; 
        color: #761616; 
        margin-bottom: 10px;
        text-transform: uppercase; 
        width: 250px; 
        position: relative; 
        top: -35px; 
        border: 1px solid #000;
    }

    .advanced-recent-posts li a {
        margin-left: 10px;
    }

    .advanced-recent-posts li img {
        position: relative; 
        top: 0px; 
        left: -10px; 
        padding: 5px; 
        border: 1px solid #999;
    }

そしてこれまでのところとても良いです。でも画像もタイトル＆日付も一部にあるので

  • それらは一緒に移動しますが、これは私が望んでいるものではありませんが、プラグインであるため、それを変更する方法がわかりません。そのため、提供された Web サイトと CSS を使用して、最近の各投稿の 2 行目が最初の投稿のすぐ下に続くようにすることを誰かが手伝ってくれることを期待していました。ここの私のデザインのように。

    ここに画像の説明を入力

    @Bonjour: これが私がやったことです

    .advanced-recent-posts li { display:table-row; vertical-align:top;}

    （そしてもちろん、私が持っていた他のすべてのスタイリングも）

    ここに画像の説明を入力

    投稿のタイトルは、少なくとも正しく流れています。

    • 4

    3 に答える 3

    0

    そこで起こっているいくつかの奇妙なポジショニング。とにかく、これを実現するには2つの方法があります。

    1. 画像を左にフロートさせ、右/下のパディングを少し追加します。このようにして、テキストは画像の下を自然に流れます
    2. 画像の下からテキストを移動するのに十分なパディングを与えながら、画像上の相対的な配置を利用しliます。このように、テキストが画像の下に流れることはありませんposition:absoluteli

    例： http： //jsfiddle.net/Ucrsk/

    于 2012-04-05T03:51:56.937 に答える
    0

    あなたの質問の私のコメントから繰り返すために、以下を使用してみてください：

    li {
    display:table-cell;
    vertical-align:top;
}

    また

    li {
    display:table-row;
    vertical-align:top;
}
    于 2012-04-05T04:23:01.273 に答える
    0

    アンカーのスタイルを変更してみてください。

    .advanced-recent-posts li a {
    display: block;
    margin-left: 10px;
}
    于 2012-04-05T03:27:09.037 に答える