簡體   English   中英

列表左側浮動圖像的右側

[英]list on the right of a left floating image

我想使用外部列表屬性在左浮動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>

請參閱小提琴,以便更好地理解。

我不能修改html,只能修改css。

我不想把list屬性放在里面。

如果我為圖像添加右邊距,那么非ul文本也會移動,我不想要它。

如果我向ul或li添加左邊距或填充,則不在圖像右側的列表也會向內移動,我不想要它。

我該如何管理它?

您可以嘗試添加隱藏在ul標簽http://jsfiddle.net/2z6Zn/61/中的溢出:

ul {
    padding-left: 1.2em;
    overflow: hidden;
}​

演示

你在尋找嗎? 我不確定....檢查這個並解釋更多如果你需要添加更多......

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

li {
    list-style-position: outside;
}
ul {
    padding-left: 1.2em;
}​

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM