html多個內容的css列表不保持內聯

我有三個div的內容（h3標題，img和p文本），大約是。 400x300，我試圖讓它們在內聯中顯示，旁邊的彼此。圖像本身可以正確顯示，但是當我將h3和/或p文本添加到它時，它會進入下一行。我的猜測是h3和p建立在破壞者身上。html多個內容的css列表不保持內聯

是否有阻止他們去下一行，仍然正常顯示？

ex。 http://fireflyspices.com/

代碼：

<ul> 
    <li> 
<div id="new_recipe"> 

<h3><a href="http://fireflyspices.com/?p=366" rel="bookmark" title="Permanent Link to Maybe?"> 
    Maybe?</a></h3><br /> 
<img src="http://fireflyspices.com/wp-content/uploads/2010/09/cajun-mojo-img.png"><br /> 
<p>I might like cjun mojoj</p> 
</div> 
     </li>

問候，

來源

2010-09-18 Steven

漂亮的網站btw。 – wsanville 2010-09-18 15:47:25

這不起作用的原因是因爲內聯元素中不能包含塊級元素，即使這最初有效也不再是真的。

像li,h3和p等元素被稱爲塊級元素，並具有諸如擴展填充所有可用空間和強制周圍內容到新行的特徵。您可以檢查哪些元素是內聯的，哪些元素是Sitepoint HTML Reference的塊。

您不應該給display: inline任何事情。實際上，您在配方部分中使用的每一個都可以被刪除。一旦你這樣做，你也可以刪除多餘的br標籤。如果你需要額外的空間，邊距和填充要好得多。你需要的樣式很簡單：

#Recipe li { 
    float: left; 
    margin-right: 12px; 
}

拆卸#Recipe無用float: left也將有助於調試的未來。

來源

2010-09-18 16:05:13

你解決了我的問題。謝謝。 – pythondjango 2012-10-24 22:06:16

如果你想在同一行的所有三個元素，爲什麼有H3和img標籤後
標籤。刪除它們，你應該罰款

來源

2010-09-18 15:42:16

只需兩個規則添加到您的樣式表：

#Recipes ul li { float: left; width: 312px; }

測試在Firefox和IE8。

來源

2010-09-18 15:46:21 wsanville

html多個內容的css列表不保持內聯

回答

相關問題