如何通过css内联属性在一行中显示两个div [重复]答案

【问题标题】：How can I display two div in one line via css inline property [duplicate]如何通过css内联属性在一行中显示两个div [重复]
【发布时间】：2014-09-22 02:38:56
【问题描述】：

我尝试使用css内联属性让div节点显示在一行，下面是我的代码

<html>
 <head>
  <style type="text/css">
   .inline { 
    display: inline; 
    border: 1px solid red; 
    margin:10px;
    }
  </style>
 </head>
 <body>
  <div>
   <div class='inline'><div>I'm here</div></div>
   <div class='inline'><div>I'm follow</div></div>
  </div>
 </body>
</html>

结果不对，两个带有'inline'类的div仍然分两行显示，而且边框也显示不正确。不知道怎么回事，谁能帮帮我？

谢谢

【问题讨论】：

了解一下inline 的作用怎么样？
在这种情况下，您可以通过删除每行中多余的
来修复它，演示：codepen.io/lznt/pen/PowmLgX
如果空间不足，inline-block 将不起作用，在这种情况下使用 white-space: nowrap。

标签： css inline

【解决方案1】：

使用inline-block 代替inline。 Read more information here about the difference between inline and inline-block.

.inline { 
display: inline-block; 
border: 1px solid red; 
margin:10px;
}

DEMO

【讨论】：

感谢您的回答，但是两个带有 inline-block 的 div 之间的空间太多
那是因为你给了保证金。删除边距，它将在每个旁边。
这个解决方案有一个烦人的问题：因为divs 是inline，所以你必须在 HTML 中在它们之间保留任何空格、换行符等。否则，浏览器将在它们之间呈现一个空格。看到这个Fiddle：你不能设法让两个divs 在同一行，除非你把他们的标签放在中间没有任何东西。
它在笔记本电脑上运行良好，但在 iPhone 等小屏幕上却不行

【解决方案2】：

您不需要使用display:inline 来实现此目的：

.inline { 
    border: 1px solid red;
    margin:10px;
    float:left;/*Add float left*/
    margin :10px;
}

您可以使用float-left。

使用 float:left 是将多个 div 元素放在一个中的最佳方式线。为什么？因为 inline-block 在查看时确实有一些问题在 IE 旧版本中。

fiddle

【讨论】：

你能解释一下否决票吗？
你能解释一下你的答案吗？
刚刚做到了。请立即解释您的反对意见。还是只是因为我的回答缺乏解释？
我投了反对票，因为在这里浮动似乎没有必要。带来的问题多于解决的问题（在本例中，包含的 div 折叠了）。如果 OP 无法理解 inline 的工作原理，float 将是一个真正的难题。另外，我不知道display: inline-block 的任何IE9 问题，它是一个符合标准的浏览器，从来没有遇到过问题。这使您的主张（“将多个 div 元素放在一行中的最佳方法”）非常不合理。
感谢您的反馈@kapa 非常感谢 :)