在列表元素內浮動元素的技巧

我試圖使用有序列表（ol）創建指令列表。在內部，我希望指令的文本左移，顯示該步的圖像右移。在列表元素內浮動元素的技巧

我已經試過包裝列表項目（LI）裏面的內容，像這樣：

<ol> 
     <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li> 
    </ol>

這只是將li元素外的圖片。我嘗試在li內部的兩個浮動元素之後添加一個清除div，我嘗試向li元素本身添加一個明確的hack。我也嘗試在浮動div內嵌套p和img元素。

這甚至可能嗎？想要使用這種方式，但如果不是，會生成一些其他解決方案。

來源

2010-06-23 tigre

非浮動容器不會將其內容識別爲具有寬度或高度，從而導致容器在給定任何其他CSS規則的情況下摺疊到其允許的最小高度。

對於段落和圖像被包含list元素所約束，您需要浮動列表元素和父列表元素。

然後，有序列表和列表元素都會縮小到展示封裝內容所需的最小寬度。這可能會導致列表過薄。將適當的寬度應用於有序列表和列表項目以處理此問題。

考慮清除DOM中排序列表正下方的任何元素，以確保它們不會滑入列表的左側或右側。

來源

2010-06-23 19:36:50

感謝提醒，喬恩。我將float：left應用於ol和li元素，然後將寬度：100％應用於li元素，以確保它適合我包含的div。乾杯! – tigre 2010-06-23 22:30:16

<ol> 
    <li> 
    <div> 
     <p style="float:left">Follow these instructions</p> 
     <img style="float:right" src="[***]" alt="" /> 
    </div> 
    </li> 
</ol>

試試這個，它幫了我。

來源

2012-07-06 07:11:40 san

你也可以考慮使用overflow: hiddentechnique;將overflow: hidden添加到您的li將使其能夠擴展以包含浮動內容。

jsFiddle here。

來源

2012-07-06 07:19:42

很酷的解決方案，但如果你在列表中有一個下拉列表，那麼它也會被部分隱藏...... – 2017-06-16 02:46:37

在列表元素內浮動元素的技巧

回答

相關問題