Chrome-css img浮動列表標記不會顯示在正確的位置

在以下編碼中，只有在Chrome中顯示列表標記時，列表標記纔會放置在圖像頂部。（浮動對文本有效，它將顯示在圖像的右側，沒有問題）此外，使用F5進行刷新時，列表標記將顯示在圖像的右側，沒有問題。爲了防止列表標記從一開始就置於圖像頂部，有人可以告訴我該怎麼做嗎？Chrome-css img浮動列表標記不會顯示在正確的位置

img { 
 
    float: left; 
 
} 
 

 
ul li { 
 
    margin-left: 20px; 
 
}

<div> 
 
    <img src="images/sample.jpg" alt="sample" width="50%" /> 
 
    <ul> 
 
    <li>aaa</li> 
 
    <li>bbb</li> 
 
    <li>ccc</li> 
 
    <li>ddd</li> 
 
    <li>eee</li> 
 
    </ul> 
 
</div>

更新：當列表變長，我需要的名單變形圖像，如下圖所示。 https://embed.plnkr.co/uo1u4YOQHAWpFEO117QG/

來源

2017-09-04 Hashimo

你可以浮動的UL權利或給它的寬度小於50％ - 20像素 – Pete

https://embed.plnkr.co/uo1u4YOQHAWpFEO117QG/ 請看看這個。當列表很長時，我想將列表放置在圖像下方。 – Hashimo

img { 
 
    display: inline-block; 
 
} 
 
ul{ 
 
    display: inline-block; 
 
} 
 
ul li { 
 
    margin-left: 20px; 
 
}

<div> 
 
    <img src="images/sample.jpg" alt="sample" width="50%" /> 
 
    <ul> 
 
    <li>aaa</li> 
 
    <li>bbb</li> 
 
    <li>ccc</li> 
 
    <li>ddd</li> 
 
    <li>eee</li> 
 
    </ul> 
 
</div>

img { 
    display: inline-block; 
} 
ul{ 
    display: inline-block; 
}

試試這個。

來源

2017-09-04 08:35:22 zynkn

感謝您的幫助，但是，我想將img放在左側，並列在右側。 – Hashimo

@Hashimo那樣？ – zynkn

再次感謝您！還有一件事，當列表很長並且想要環繞圖像時，是否有不同的方式？當我嘗試我的本地環境時沒有問題（列表標記是圖片的右側），但是當我在服務器上發佈時，列表標記就在Chrome上發生的圖像上。 – Hashimo

您可以嘗試浮動你<ul>像這樣：

ul{ 
    float: left; 
    width: calc(50% - 20px); 
}

這應該浮動的一切和UL將始終在圖像的右側。

來源

2017-09-04 08:39:22

Chrome-css img浮動列表標記不會顯示在正確的位置

回答

相關問題