给定这个HTML:

<div>foo</div><div>bar</div><div>baz</div>

如何让它们像这样内联显示:

Foo bar baz

不是这样的:

喷火 酒吧 巴兹


当前回答

如前所述,display:inline可能是您想要的。一些浏览器还支持内联块。

http://www.quirksmode.org/css/display.html#inlineblock

其他回答

如前所述,display:inline可能是您想要的。一些浏览器还支持内联块。

http://www.quirksmode.org/css/display.html#inlineblock

内联div是网络的一个怪物,应该被打败,直到它变成一个span(至少10次中有9次)…

<span>foo</span>
<span>bar</span>
<span>baz</span>

...回答最初的问题…

<style type="text/css">
div.inline { display:inline; }
</style>
<div class="inline">a</div>
<div class="inline">b</div>
<div class="inline">c</div>

在多次阅读这个问题和答案之后,我所能做的就是假设有相当多的编辑在进行,我的怀疑是,由于没有提供足够的信息,你得到了错误的答案。我的线索来自br标签的使用。

向Darryl道歉。我把class="inline"读为style="display: inline"。你有正确的答案,即使你使用了语义上有问题的类名;-)

没有使用br来提供结构布局,而不是文本布局,这对我来说太普遍了。

如果你想在这些div中放置更多的内联元素,那么你应该浮动这些div,而不是使它们内联。

提出div:

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

内联div:

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

如果你追求前者,那么这就是你的解决方案,丢掉那些br标签:

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

注意,这些div的宽度是流动的,所以如果你想控制它们的行为,可以随意设置宽度。

谢谢, 史蒂夫