<分区>
<分区>
在这个例子中，我将使用 2 个 DIV
<div>
<div class="element"></div>
<div class="element"></div>
</div>
使用 CSS
.element { float: left; }
好的，以上是将 block 显示为内联的一种方法。我最近遇到了另一种方法:
<div>
<div class="element"></div>
<div class="element"></div>
</div>
.element { display: inline-block; }
现在上面的代码也将 block 显示为内联。
虽然，第一种方法还有另一件事需要担心，即当您使用 float 时，它会扰乱内容的正常流动。
所以我想知道，以上哪种方法是实现内联显示的最佳方式？ 如果是第二种方法，那是否意味着我不应该使用第一种方法？
最佳答案
display:inline-block 是最好的方法，但请记住，当您使用 display:inline-block 时，会出现一些跨浏览器问题，div 在各种浏览器中的显示可能会有所不同，例如某些浏览器顶部对齐，而在其他浏览器中它可能是底部对齐。解决这个问题的一个简单方法是设置垂直对齐
使用 display:inline-block 的好处是您可以将 div 置于中心。如果你希望你的 div 也显示在页面的中心，那么这可以通过使用 display:inline-block 来实现，并且在父 div 中你必须添加 text-align:centre。这无法通过 float 实现，您可以从要添加的侧面保存那些额外的填充，使它们出现在中心。
Float:left 也有它的好处，无论何时何地都应该比内联 block 更多地使用
关于html - 什么是更好的方法，float 或 display-inline？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26667017/
相关文章：
javascript - 我可以控制有多少选项使选择标签变得可滚动吗？
javascript - 想要在 JavaScript 中验证电子邮件地址，但不知道如何在字符串中只包含一个 @
javascript - 我需要有关图片编号的文本以在 jcarousel 中更改
jquery - Twitter Bootstrap - 导航栏切换不会在索引以外的页面上打开
css - 并排堆叠两张带有标题的图片并在 Wordpress 中居中
html - 如何自动调整 HTML 表格单元格的大小以适合文本大小