如何通过css内联属性在一行中显示两个div

Question

如何通过css内联属性在一行中显示两个div

我尝试使用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>

Run Code Online (Sandbox Code Playgroud)

结果不对,类'内联'的两个div仍然显示在两行中,并且边框也显示不正确.我不知道发生了什么,谁能帮帮我？

谢谢

Answer 1

Sur*_*lai 22

用inline-block而不是inline.在此处阅读有关内联块和内联块之间差异的更多信息.

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

Run Code Online (Sandbox Code Playgroud)

DEMO

因为你已经给了保证金.删除它们旁边的边距. (4认同)
这个解决方案有一个烦人的问题：由于将`div`做成了“ inline”，因此您必须在HTML中不要在它们之间留空格，换行等。否则，浏览器将在它们之间渲染一个空格。请参阅[** Fiddle **]（https://jsfiddle.net/AlexandrAbakumov/1n2a05ob/）：除非两个div标记之间没有任何分隔，否则您将无法将两个div保持在同一行。 (2认同)

Answer 2

Ale*_*har 5

您不需要使用display:inline来实现这一点：

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

Run Code Online (Sandbox Code Playgroud)

您可以使用float-left.

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

小提琴

归档时间：	11 年，4 月前
查看次数：	121337 次
最近记录：	11 年，4 月前