</div> "> </div> "> </div> " />

フローティングimgの周りにulを流すにはどうすればいいですか?

私は左に浮かんだimgを持っています。その後、imgの右側にレンダリングしなければならない長いulが続きます。これは行いますが、imgの隣にあるulの部分はすべて一列に並んでいて、インデントを失います。

ここには最小事例があります。 ( jsbin の中の)

<html>
<head>
</head>
<body>
    <div style="float:left"></div>
    
  • Level 1
  • Level 1
    • Level 2
    • Level 2
    • Level 2
    • Level 2
  • Level 1
  • Level 1
  • Level 1
  • Level 1
<div style="clear:both"><!-- --></div> More content More content More content More content More content More content More content More content More content More content More content </body> </html>

私はあなたの助けに感謝します。

3
あなたのインデントは実際にそこにありますが、ボディから計算されます - フローティングイメージdivはネストされたulのマージン/パディングをカバーします。私は長い時間これの解決策を探してきましたが、見つけられないようです。フローティングされた要素の背後にあるものは、背景イメージ、パディングまたはマージンです。ここにテストケースがあります - 私はそれを1つだけ投稿しましたが、JSを除いて1年以上で解決策が見つかりませんでした。 easwee.net/floated_img_article
追加された 著者 easwee,
追加された 著者 easwee,
どのURLですか?私はulをイメージの周りに流し、適切なインデントで描画します。
追加された 著者 bnieland,

2 答え

CSS:

div {margin:0 10px 5px 0; float:left;}


ul{
padding:0px;
list-style-type:none;
margin:0px;
}
0
追加された

これを試して:

/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}

/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}
0
追加された
あなたはパーティーを揺るがすパーティーを弾きます!
追加された 著者 bnieland,
jsbin.com/ulivem/2/edit を参照してください。
追加された 著者 bnieland,