给定这个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{边界:1px固体#CCC;的 <div style=“显示:inline”>a</div> <div style=“显示:inline”>b</div> <div style=“显示:inline”>c</div>

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

对我来说:

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

你得控制住这三个div。这里有一个例子:

CSS

div.contain
{
  margin:3%;
  border: none;
  height: auto;
  width: auto;
  float: left;
}

div.contain div
{
  display:inline;
  width:200px;
  height:300px;
  padding: 15px;
  margin: auto;
  border:1px solid red;
  background-color:#fffff7;
  -moz-border-radius:25px; /* Firefox */
  border-radius:25px;
}

注意:border-radius属性是可选的,只适用于CSS3兼容的浏览器。

HTML

<div class="contain">
  <div>Foo</div>
</div>

<div class="contain">
  <div>Bar</div>
</div>

<div class="contain">
  <div>Baz</div>
</div>

注意div 'foo' 'bar'和'baz'都包含在' contains ' div中。