リストと同じ高さの行

図1に示すように、私は<ul>リストを持っています。ワードプレス "Display Posts Shortcode"プラグインによって作成されています。リストと同じ高さの行

画像とテキストの間に縦線を入れたい（写真2参照）。

私はその問題をどのように解決できるかわかりません。

これは、ウェブサイトである：here

あなたはこの問題を解決するためにどのようにアイデアを持っている場合、それは本当にいいだろう。

2016-07-23 Lukas Ertl

プラグインの出力HTMLを変更する必要があります。これを達成するには、shortcode/postsプラグインの開発者に連絡するのが最善です。彼はあなたに正確なアドバイスを与えることができ、それを変更するために使用できるいくつかのフィルター、フック、アクションを知っているでしょう。 –

彼は答えません：/ –

これにはいくつかの解決策があります。このサイトは応答性がなく、イメージの列幅が固定されているように見えるので、私の最も簡単な解決策は、次のようなものです。

イメージを作成します。 3px x 3pxの赤い四角形のように見えます。私はそれをred3x3.pngという名前にしてimagesフォルダに置きます。
あなたに以下の行を追加します。あなたのstyle.cssファイルに行442でルールを.display-記事-リスト：再び

.display-posts-listing { list-style: none; display: inline-block; float: right; width: 100%; /* add following 4 lines */ background-image: url(/bilder/red3x3.png); background-repeat: repeat-y; background-size: 1%; background-position-x: 220px; }

、ここではいくつかの他のソリューションがありますが、私はこれを考えます1つは、より簡単で安全です。

2016-07-23 16:09:57 zJorge

まだ応答していません。他のニュース記事では、それは他のニュースの下に表示されるので、線は何とか可変の高さを持たなければならない。 –

この解決策にはこれが考慮されます。それはすべての記事を拡張してカバーします。私のソリューションはまだ実装されていますか？応答性のためには、それに応じて他のメディアクエリにCSSルールを追加する必要があります。基本的に背景位置-xを変更する：220px;より少ない数に。 – zJorge

ああ、今私はあなたに感謝します！作品！ –

答えて