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

display:inline-block应用于跨度将不起作用。 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/

最佳答案

Span元素默认为内联,只需要在父元素中添加text-align: center,为什么会使它复杂化?浮点数是什么?



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





没有诸如中心浮动之类的东西,相反,您必须使用margin: auto将块级元素居中。

09-25 17:26
查看更多