列表中的浮動div（谷歌瀏覽器）

我需要兩個div在列表中彼此相鄰。下面的代碼工作正常在Firefox，而不是在谷歌瀏覽器：列表中的浮動div（谷歌瀏覽器）

<ul> 
    <li> 
     <div style="float:left;">DIV 1</div> 
     <div>DIV 2</div> 
    </li> 
</ul>

見谷歌瀏覽器的子彈位置：

Bullet position in Google Chomre

我在做什麼錯？

來源

2016-05-10 user2939345

什麼不起作用？這個小提琴https://jsfiddle.net/1odd1ju6/既可以在Chrome瀏覽器中運行，也可以在Firefox瀏覽器中運行（同樣，列表點的位置也不相同 - 是這個問題嗎？）。 – winhowes

是的，子彈的位置是不同的。在谷歌瀏覽器中，它在兩個div之間。我在原帖中上傳了一張圖片。 – user2939345

而不是使用兩個div的float:left;使用display:inline-block;添加填充和利潤率左，右股利。這將允許他們在同一行。這裏有一個更新的小提琴顯示：https://jsfiddle.net/1odd1ju6/1/

來源

2016-05-10 22:41:04 winhowes

任何想法如何使用您的解決方案來實現以下行爲：https://jsfiddle.net/1odd1ju6/2/ （第二個div的內容停留在第二個div下） – user2939345

@ user2939345您可以使用在這種情況下的桌子？或者在這裏查看一些'display''表格屬性：https://developer.mozilla.org/en-US/docs/Web/CSS/display – winhowes

謝謝！表格單元完美地工作:) – user2939345

-1

<div class=container style="width:100%;"> 
 
<div class=left style="float:left; height: 200px; width: 200px; border-style:dotted;"> 
 
</div> 
 
<div class=right style="float:right; height: 200px; width: 200px; border-style:dotted;"> 
 
</div> 
 
</div>

現在，只要你想

來源

2016-05-10 22:40:11

列表中的浮動div（谷歌瀏覽器）

回答

相關問題