如何使div元素内联显示?

给定这个HTML:

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

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

Foo bar baz

不是这样的:

喷火酒吧巴兹

当前回答

在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>而不是<div> 内联。因为div是块级元素，而您的要求是内联块级元素。

以下是根据您的要求提供的html代码:

<div class="main-div">
 <div>foo</div>
 <div>bar</div>
 <div>baz</div>`
</div>

你有两种方法

使用简单的显示:inline-block; 或者使用float:left;

所以你需要改变显示属性display:inline-block;有力地

一个例子

div {
    display: inline-block;
}

两个例子

div {
    float: left;
}

你需要清除浮动

.main-div:after {
    content: "";
    clear: both;
    display: table;
}

2015-11-10 11:41:03

我会使用span或将div向左浮动。浮动的唯一问题是，你必须清除浮动之后，或包含div必须有溢出样式设置为auto

2011-04-16 23:51:07

<div class="cdiv">
<div class="inline"><p>para 1</p></div>
 <div class="inline">
     <p>para 1</p>
     <span>para 2</span>
     <h1>para 3</h1>
</div>
 <div class="inline"><p>para 1</p></div>

http://jsfiddle.net/f8L0y5wx/

2014-08-20 03:54:20

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

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

2008-12-31 15:06:49

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

推荐文章

最新文章

标签