2

私のウェブサイトのページに設定があり<ul>ます。のそれぞれ<li>の中に<ul>、画像といくつかのテキストがあります。最初に画像を配置してからテキストを入力しようとすると、テキストが押し下げられ、正しくフォーマットできません。画像にを追加しようとしましたvertical-align: text-topが、これはテキストを上にプッシュするだけで、テキストが追加されたため下に移動できませんでした。

JSFiddle- http: //jsfiddle.net/kh4xC/

HTML

<div id="older-videos">    
<ul>
            <li>
            <img src="../Images/Article Images/GuliyevFace14.png" class="li-image" />
            Heydər Oğuzun Rəsul Quliyevlə Müsahibəsi - 29 İyul 2012, 2-ci hissə

            </li>

    </ul>
</div>

CSS

#older-videos ul li {
    display:block;
    width:600px;
    height:162px;
    background-color:#EEEEEE;

}
#older-videos ul li img{ vertical-align:text-top;
}
.li-image {
    width:250px;
    height:162px;
    -moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 5px 1px 5px #888;
    }
4

2 に答える 2

1

<li>それぞれをブロック要素として宣言しているのは良いことです。次のステップは、画像にフロートを割り当てることだと思います。テキストの左側の画像が必要な場合は、float：leftを.li-imageクラスに宣言するだけです。テキストをプロパティに合わせる機能についてはよくわかり<li>ませんが、に対して宣言されているvertical-alignとtext-alignを試すこともできます<li>。

ただし、どちらの場合も、display：blockを維持し、画像をフローティングにすることをお勧めします。これは、CSSを使用するブラウザーでのより大きなレイアウトの意図が難しいはずです。

于 2012-08-12T02:41:45.610 に答える
0

説明テキストを独自の<li></li>タグに配置してみませんか？あなたの問題に対する簡単な解決策のようです。

于 2012-08-12T02:31:36.837 に答える