<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>水平描述列表

回答

相关问题