如何使div元素内联显示?

给定这个HTML:

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

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

Foo bar baz

不是这样的:

喷火酒吧巴兹

当前回答

我认为你可以使用这种方式不使用任何CSS -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

现在你正在使用块级元素，你会得到一个不想要的结果。你可以使用内联元素，比如span, small等等。

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

2015-02-23 10:03:04

其他回答

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

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

.．.回答最初的问题…

2008-12-31 15:01:29

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

2008-10-22 06:04:33

<div>foo</div><div>bar</div><div>baz</div>
//solution 1
<style>
    #div01, #div02, #div03 {
                                float:left;
                                width:2%;
    }   
 </style>
 <div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 //solution 2

 <style>
      #div01, #div02, #div03 {
                                  display:inline;
                                  padding-left:5px;
      }   
</style>
<div id="div01">foo</div><div id="div02">bar</div><div id="div03">baz</div>

 /* I think this would help but if you have any other thoughts just let me knw      kk */

2016-02-08 02:29:52

在多次阅读这个问题和答案之后，我所能做的就是假设有相当多的编辑在进行，我的怀疑是，由于没有提供足够的信息，你得到了错误的答案。我的线索来自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的宽度是流动的，所以如果你想控制它们的行为，可以随意设置宽度。

谢谢, 史蒂夫

2008-12-31 16:07:51

在IE6/7中使用display:带边距和媒体查询的inline-block:

<html>
  <head>
    <style>
      div { display:inline-block; }
      /* IE6-7 */
      @media,
          {
          div { display: inline; margin-right:10px; }
          }
   </style>
  </head>
  <div>foo</div>
  <div>bar</div>
  <div>baz</div>
</html>

2012-01-07 00:06:30

如何使div元素内联显示?

推荐文章

最新文章

标签