如何使div元素内联显示?

给定这个HTML:

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

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

Foo bar baz

不是这样的:

喷火酒吧巴兹

当前回答

我们可以这样做

.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

其他回答

我只是倾向于把它们设置为固定宽度，这样它们加起来就是页面的总宽度——可能只有当你使用一个固定宽度的页面时才有用。也“浮动”。

2010-01-08 11:18:14

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

2008-10-22 06:02:07

<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是网络的一个怪物，应该被打败，直到它变成一个span(至少10次中有9次)…

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

.．.回答最初的问题…

2008-12-31 15:01:29

如何使div元素内联显示?

推荐文章

最新文章

标签