<dl>水平描述列表

我有兩個描述列表（一個目的地周圍的咖啡店，另一個在那個目的地周圍的甜甜圈店），我想要水平地並排顯示。我試過display:inline-block和float的所有組合都無濟於事。無論如何，一個列表總是被另一個列表覆蓋。<dl>水平描述列表

小提琴：

http://jsfiddle.net/JamesGold/e1fsu5jt/

名單是由它調用谷歌圖書館地方的JavaScript代碼填充。

編輯：這些列表似乎沒有在小提琴中填充，但它們確實在我的瀏覽器中填充了......小提琴不支持Google Places API調用嗎？

來源

2014-10-27 JamesGold

有很大幫助檢查控制檯，看到顯示有什麼錯誤信息......看你的小提琴，你的外部腳本'coffee_and_donuts.js '顯然是缺少的，因爲你在jsfiddle中提到它的相對url ... – webeno 2014-10-27 06:48:25

，你的外部文件必須被添加到'外部資源'，你不必調用你添加代碼的文件到小提琴的js部分... – webeno 2014-10-27 06:49:49

對不起，我是新手。我應該如何將coffee_and_donuts.js添加到外部資源？ – JamesGold 2014-10-27 06:59:15

將它們包裹在div之內，並且浮動應該可以正常工作。

<div style="width: 50%; float:left;"> 
    <dl> 
    <dt id="coffee1"></dt> 
     <dd id="coffee1_address"></dd> 
     <dd id="coffee1_number"></dd> 
     <dd id="coffee1_rating"></dd><br> 
    <dt id="coffee2"></dt> 
     <dd id="coffee2_address"></dd> 
     <dd id="coffee2_number"></dd> 
     <dd id="coffee2_rating"></dd><br> 
    <dt id="coffee3"></dt> 
     <dd id="coffee3_address"></dd> 
     <dd id="coffee3_number"></dd> 
     <dd id="coffee3_rating"></dd><br> 
    <dt id="coffee4"></dt> 
     <dd id="coffee4_address"></dd> 
     <dd id="coffee4_number"></dd> 
     <dd id="coffee4_rating"></dd><br> 
    <dt id="coffee5"></dt> 
     <dd id="coffee5_address"></dd> 
     <dd id="coffee5_number"></dd> 
     <dd id="coffee5_rating"></dd> 
    </dl> 
    </div> 
    <div style="width: 50%; float:right;"> 
    <dl> 
    <dt id="donuts1"></dt> 
     <dd id="donuts1_address"></dd> 
     <dd id="donuts1_number"></dd> 
     <dd id="donuts1_rating"></dd><br> 
    <dt id="donuts2"></dt> 
     <dd id="donuts2_address"></dd> 
     <dd id="donuts2_number"></dd> 
     <dd id="donuts2_rating"></dd><br> 
    <dt id="donuts3"></dt> 
     <dd id="donuts3_address"></dd> 
     <dd id="donuts3_number"></dd> 
     <dd id="donuts3_rating"></dd><br> 
    <dt id="donuts4"></dt> 
     <dd id="donuts4_address"></dd> 
     <dd id="donuts4_number"></dd> 
     <dd id="donuts4_rating"></dd><br> 
    <dt id="donuts5"></dt> 
     <dd id="donuts5_address"></dd> 
     <dd id="donuts5_number"></dd> 
     <dd id="donuts5_rating"></dd> 
    </dl> 
</div>

下面是該提琴：http://jsfiddle.net/e1fsu5jt/6/ - 我添加的文本到右側一列（見下文解釋）。

注意：你可能看不到右邊的甜甜圈，因爲由於某種原因，沒有結果被返回，但這是一個完全不同的問題（與css定位無關）。

編輯：實際上，您不必將它們包裝在div內，這只是最佳做法。您也可以將相同的樣式應用於dl元素，您只需確保正確地做到這一點。不知道你爲什麼float不適合你，但它應該。你只需要確定其中一個元素有left，另外一個right，並且兩個都有width，這些元素的總和等於它們的容器總數或100％（包括邊距和填充！）。

這裏是沒有額外的div的更新小提琴：http://jsfiddle.net/e1fsu5jt/9/

來源

2014-10-27 07:09:15 webeno

你能解釋爲什麼他們必須包裝在一個div？ – JamesGold 2014-10-27 08:22:19

只是在編輯時解釋了我的答案;） – webeno 2014-10-27 08:49:56

<dl>水平描述列表

回答

相關問題