具有多个内容的html css列表不保持内联

Question

我有三个内容（h3标题，img和p文本）的div，大约是。 400x300，我试图让它们显示内联，彼此相邻。图像本身显示正确，但是当我向其添加h3和/或p文本时，它会进入下一行。我的猜测是h3和p内置断路器。

无论如何都要阻止它们进入下一行，并且仍能正常显示？

离。 http://fireflyspices.com/

代码：

    <ul>
    <li>
<div id="new_recipe">

<h3><a href="http://fireflyspices.com/?p=366" rel="bookmark" title="Permanent Link to Maybe?">
    Maybe?</a></h3><br />
<img src="http://fireflyspices.com/wp-content/uploads/2010/09/cajun-mojo-img.png"><br />
<p>I might like cjun mojoj</p>
</div>
       </li>

此致

Answer 1

这不起作用的原因是因为你不能在内联元素中包含块级元素，即使这最初是有效的，它也不再是真的。

li，h3和p等元素称为块级元素，并具有扩展功能，以填充所有可用空间并将周围内容强制转换为新行。您可以使用Sitepoint HTML Reference检查哪些元素是内联的，哪些元素是块。

你不应该给display: inline一切。实际上，您可以删除配方部分中使用的每一个。您也可以在执行此操作后删除无关的br标记。如果你需要额外的空间，边距和填充要好得多。你需要的风格很简单：

#Recipe li {
  float: left;
  margin-right: 12px;
}

删除float: left上无用的#Recipe也有助于将来进行调试。

Answer 2

如果你想要同一行中的所有三个元素，为什么在h3和img标签之后有标签。删除它们你应该没问题

Answer 3

只需在样式表中添加两条规则：

#Recipes ul li { float: left; width: 312px; }

在Firefox和IE8中测试过。