如何使div元素内联显示?

给定这个HTML:

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

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

Foo bar baz

不是这样的:

喷火酒吧巴兹

当前回答

我知道人们说这是一个糟糕的想法，但如果你想做一些像平铺图像下面有注释的事情，它在实践中是有用的。Picasaweb使用它来显示相册中的缩略图。参见示例/demo http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/inline_block_quirks.html(类goog-inline-block;这里我把它缩写为ib)

/* below is a set of hacks to make inline-block work right on divs in IE. */
html > body .ib { display:inline-block; }
.ib {display:inline-block;position:relative;}
* html .ib { display: inline; }
:first-child + html .ib { display:inline; }

给定CSS，将div设置为ib类，现在它神奇地成为一个内联块元素。

2011-02-12 02:56:37

其他回答

试着这样写:

div{边界:1px固体#CCC;的 <div style=“显示:inline”>a</div> <div style=“显示:inline”>b</div> <div style=“显示:inline”>c</div>

2008-10-22 06:02:07

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

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

.．.回答最初的问题…

2008-12-31 15:01:29

在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

< span > ?

2008-10-22 08:39:45

对我来说:

<style type="text/css">
    div{
        position: relative;
        display: inline-block;
        width:25px;
        height:25px;
    }
</style>
<div>toto</div>
<div>toto</div>
<div>toto</div>

2014-12-22 10:31:18

如何使div元素内联显示?

推荐文章

最新文章

标签