如何使div元素内联显示?

给定这个HTML:

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

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

Foo bar baz

不是这样的:

喷火酒吧巴兹

当前回答

你得控制住这三个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中。

2011-01-26 13:55:11

其他回答

我们可以这样做

.left {
    float:left;
    margin:3px;
}
<div class="left">foo</div>
<div class="left">bar</div>
<div class="left">baz</div>

2012-09-25 02:53:58

内联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

<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

<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元素内联显示?

推荐文章

最新文章

标签