如何让 div 元素内联显示？答案

【问题标题】：How do you make div elements display inline?如何让 div 元素内联显示？
【发布时间】：2019-01-01 05:52:31
【问题描述】：

鉴于此 HTML：

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

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

富吧巴兹

不是这样的：

富
酒吧
巴兹

【问题讨论】：

标签： html css

【解决方案1】：

我认为你可以在不使用任何 CSS 的情况下使用这种方式 -

<table>
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
    <tr>
        <td>baz</td>
    </tr>
</table>

现在您正在使用块级元素，这样您就会得到不需要的结果。所以你可以内联元素，如 span、small 等。

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

【讨论】：

【解决方案2】：

试着这样写：

div { border: 1px solid #CCC; }

    <div style="display: inline">a</div>
    <div style="display: inline">b</div>
    <div style="display: inline">c</div>

【讨论】：

这是该问题的正确答案，但考虑到已接受的答案，我怀疑该问题并未解决实际情况。

【解决方案3】：

那就是另外一回事了：

div.inline { float:left; }
.clearBoth { clear:both; }

<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<div class="inline">1<br />2<br />3</div>
<br class="clearBoth" /><!-- you may or may not need this -->

【讨论】：

实际上这是我发现正确显示内联的唯一方法我不知道为什么无浮动解决方案不起作用....
这里的css类名不能作为例子。使用正确的语义命名，例如：css-tricks.com/semantic-class-names
float 也是错误的方法。 display: inline 或 display: inline-block 是合适的解决方案，或者使用像 flexbox 这样的完整布局解决方案。 float 用于在图像周围环绕文字。

【解决方案4】：

您应该使用<span> 而不是<div> 以获得正确的方法内联。因为 div 是块级元素，而您的要求是内联块级元素。

这里是根据您的要求的 html 代码：

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

你有两种方法可以做到这一点

使用简单的display:inline-block;
或使用float:left;

所以你必须强制更改显示属性display:inline-block;

示例

div {
    display: inline-block;
}

示例二

div {
    float: left;
}

你需要清除浮动

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

【讨论】：

【解决方案5】：

<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 */

【讨论】：

【解决方案6】：

您需要包含三个 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' 都包含在 'contain' div 中。

【讨论】：

【解决方案7】：

好的，对我来说：

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

【讨论】：

【解决方案8】：

<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/

【讨论】：

【解决方案9】：

将display:inline-block 与 IE6/7 的边距和媒体查询一起使用：

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

【讨论】：

【解决方案10】：

我们可以这样做

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

【讨论】：

【解决方案11】：

只需使用带有 "float: left" 的包装 div，然后将包含 float: left 的框放入其中：

CSS：

wrapperline{
width: 300px;
float: left;
height: 60px;
background-color:#CCCCCC;}

.boxinside{
width: 50px;
float: left;
height: 50px;
margin: 5px;
background-color:#9C0;
float:left;}

HTML：

<div class="wrapperline">
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
<div class="boxinside">Box 1</div>
</div>

【讨论】：

【解决方案12】：

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

【讨论】：

我相信我们正在谈论一个与文本或其他内容内联的 div，而不是浮动到一侧。
当在包含的 div 上使用 float:left 和 overflow:auto 时，溢出的滚动条如何/何时发挥作用？

【解决方案13】：

我知道人们说这是一个糟糕的想法，但如果你想做一些像平铺图像这样的事情，那么它在实践中会很有用，下面是 cmets。例如Picasaweb 使用它来显示相册中的缩略图。
参见示例/演示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 类，现在它神奇地是一个内联块元素。

【讨论】：

【解决方案14】：

我只是倾向于将它们设置为固定宽度，以便它们加起来等于页面的总宽度 - 可能仅在您使用固定宽度页面时才有效。也是“浮动”。

【讨论】：

【解决方案15】：

已经阅读了这个问题和答案几次，我所能做的就是假设正在进行相当多的编辑，我怀疑你因为没有提供足够的答案而得到了错误的答案信息。我的线索来自br标签的使用。

向达里尔道歉。我将 class="inline" 读为 style="display: inline"。你有正确的答案，即使你确实使用了语义上有问题的类名;-)

我不喜欢使用br 来提供结构布局而不是文本布局，这太普遍了。

如果您想在 divs 中放置更多的内联元素，那么您应该浮动那些 divs 而不是内联。

浮动 div：

===== ======= ==   **** ***** ******   +++++ ++++
===== ==== =====   ******** ***** **   ++ +++++++
=== ======== ===   ******* **** ****   
===== ==== =====                       +++++++ ++
====== == ======

内联 div：

====== ==== ===== ===== == ==== *** ******* ***** ***** 
**** ++++ +++ ++ ++++ ++ +++++++ +++ ++++

如果您追求前者，那么这就是您的解决方案，并且丢失那些 br 标签：

<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>
<div style="float: left;" >
  <p>block level content or <span>inline content</span>.</p>
  <p>block level content or <span>inline content</span>.</p>
</div>

请注意，这些 div 的宽度是可变的，因此如果您想控制其行为，请随意为其设置宽度。

谢谢，史蒂夫

【讨论】：

【解决方案16】：

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

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

【讨论】：

@NexusRex 有办法让 IE 正常运行，但是 display:inline 是正确的答案。我相信解决方法是： display: inline-block; *显示：内联； *缩放：1；设置缩放会强制 IE 将元素视为块元素。

【解决方案17】：

内联 div 是网络的怪胎，应该被打败，直到它变成一个跨度（10 次中至少有 9 次）...

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

...回答最初的问题...

【讨论】：

有时您希望 div 内联显示，例如，当您想在元素的左侧和右侧添加边距时。我认为跨度无法做到这一点。不过，Steve 可能应该使用 float 而不是 inline。
不确定我是否关注 Darryl，您可以为 span 添加边距或内边距>> xxxxx
不幸的是，HTML5 不支持将 div 放在中。我曾经使用 s 将 CSS 样式放在一个部分上，而不是让浏览器将该部分解释为一个块并将其块布局强加给我。但是我今天刚刚在将我的页面移植到 JQuery Mobile+HTML5 时发现，如果您在中有一个
，则 HTML5 验证器会抱怨它是无效的 HTML5，因此在某些情况下使用标签而不是内联
是不可行的，至少在 HTML5 中是不可行的。
有时虽然你生活在一个不是你创造的世界中，但你可以在 CSS 中改变唯一的东西。在这种情况下 style="display: inline" 效果很好。
如果您没有“卡住”使用 div，这是一个很好的答案。但是可能有很多原因导致您需要使用 div 但又需要将它们显示为内联元素。