Chrome - css img float listmarkが適切な場所に表示されない

Question

次のコードでは、リストマークはChromeに表示されている場合にのみ画像の上に表示されます。 （フロートはテキストには有効ですが、画像の右側に問題なく表示されます） また、F5でリフレッシュすると、画像の右側に問題なく表示されます。 リストマークが最初から画像の上に置かれないようにするには、誰か教えてください。

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/

Answer 1

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; 
} 

これを試してみてください。

Answer 2

あなたはそうのようなあなたの<ul>浮くしようとすることができます：すべてを浮遊しなければならないし、ULが常に画像の右側になります

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

を。