5

外部リスト プロパティを使用して、左フローティング img の右側に ul リストを適切に配置したいのですが、画像がない場合と同じように、箇条書きが画像の右側に配置されていませんが、左側に多くあります。 .

<img style="float: left; margin-right: 0.1em;" src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Lorem ipsum dolor sit amet, cnsectetur cnsecteturcnsectetur um dolor sit amet, consectetur adipiscing elit</li>
</ul>

理解を深めるためにフィドルを参照してください。

cssのみで、htmlは変更できません。

リストプロパティを内部に入れたくありません。

画像に右マージンを追加すると、not-ul テキストも移動されますが、これは望ましくありません。

ul または li に左マージンまたはパディングを追加すると、画像の右側にないリストも内側に移動します。これは望ましくありません。

どうすれば管理できますか?

4

2 に答える 2

9

ul タグhttp://jsfiddle.net/2z6Zn/61/に隠されたオーバーフローを追加して試すことができます。

ul {
    padding-left: 1.2em;
    overflow: hidden;
}​
于 2012-10-23T19:10:07.977 に答える
1

デモ

それはあなたが探しているものですか？よくわかりません....これを確認し、さらに追加する必要がある場合は詳細を説明してください...

img {
    float: left;
    margin-right: 1.9em;
     position: relative;
}

li {
    list-style-position: outside;
}
ul {
    padding-left: 1.2em;
}​
于 2012-10-23T14:11:51.100 に答える