Question

我有两个描述清单（一个目的地周围的咖啡店之一，另一个围绕该目的地的甜甜圈商店），我希望水平并排显示。我已尝试display:inline-block和float的所有组合无效。无论如何，一个列表总是由另一个列表覆盖。

小提琴：

列表由javascript代码填充，该代码调用Google商家信息库。

编辑：这些列表似乎没有在小提琴中填充，但是它们确实会在我的浏览器中填充...是否不支持Google Places API调用？

Answer 1

将它们包裹在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/ - 我将文字donuts添加到右侧栏目（请参阅下面的说明）。

注意：您可能看不到右侧的甜甜圈，因为由于某种原因，没有返回结果，但这是一个完全不同的问题（与css定位无关））。

编辑：实际上，您不必将它们包含在div内，这只是最佳做法。您也可以将相同的样式应用于dl元素，您只需确保正确执行即可。不确定为什么float没有为你工作之前你做了什么，但它应该。您只需要确保其中一个元素left，另一个元素right，并且两者都指定了width，这些元素的总容量达到100％（包括边距）和填充！）。

这是一个更新的小提琴，没有额外的div＆＃39; s http://jsfiddle.net/e1fsu5jt/9/

<dl>描述列表并排列出</dl>

1 个答案: