CSS - 內聯塊中斷浮動

Question

我有一個向左浮動的<div>和一個呈現在它右側的<p> 。 問題是，我的文本和我的 div 之間沒有間距。 我試圖在 div 和 p 中添加邊距和填充，但它們不起作用。 我讀到我需要先將inline-block應用於p 。 這使填充和邊距起作用，但它破壞了float:left ：

 <div style="float: left"> <ul> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> </ul> </div> <p style="margin-left: 15px; display: inline-block;"> Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p>

如何為文本添加邊距並保持浮動：div 的左側？

Answer 1

你為什么不使用flexbox ？ 您將需要創建一個包裝div並將ul和p標記作為其子項。

 div{ display: flex; align-items: top; justify-content: flex-start;} p { margin-left: 15px; }

 <div> <ul> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> </ul> <p> Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p> </div>

Answer 2

您可以通過更改 HTML 結構來使用flexbox ：

 div { display: flex; } p { margin-left: 15px; }

 <div> <ul> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> </ul> <p> Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p> </div>

Answer 3

刪除段落上的樣式，而是在 div 的右側添加邊距似乎可以完成您所追求的：

 <div style="float: left; margin-right:50px;"> <ul> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> <li>test1</li> </ul> </div> <p>Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. Lorem ipsum killer smacks biggie smalls superman ate him good so I forgot to drain the godhead. </p>