html - 具有 float 属性的中心跨度元素

Question

我有 span 元素，我想将它们 float 并居中。 我需要 float 跨度，这样当屏幕宽度小于跨度宽度时它们就不会消失。如果 float ，它们将随着屏幕缩小而一行一行地跳到下一行。我想我可以使用 3 个 float 的 divs 居中，但我想知道是否有一种简单的方法可以做到这一点并且无需在任何东西上设置固定宽度。

将 display:inline-block 应用于 span 将不起作用。 text-align: center 是继承的。

HTML

<div style="text-align: center; margin-bottom: 20px;">
    <div style="float:left;">
       <span style="float:left">FOO</span><span style="float:left">BAR</span>
    </div>
</div>

编辑:解释它的 JSFiddle:https://jsfiddle.net/5yyhdpf1/

Answer 1

Span元素默认是内联的，parent加上text-align:center就可以了，为什么要复杂化呢？ float 有什么意义？

<div style="text-align: center; margin-bottom: 20px;">
    <span>FOO</span><span>BAR</span>
</div>

没有居中 float 这样的东西，相反你必须使用 margin: auto 来居中 block 级元素。