将<span>与<div>元素的右边距对齐

Question

我有以下代码，它是一个<div>元素，其中包含两个由<span>分隔的<br>元素

<div style="background-color: orange;">
    <span>Foo</span><br>
    <span>Bar</span>
</div>

https://jsfiddle.net/73bwrdxk/

不确定是否相关，但我使用的是Bootstrap 3。

我希望第二个<span>（带有文字Bar的那个）将正确对齐。

Answer 1

您可以使用float

style="float: right;"

Using In-line style tag

<div style="background-color: orange;">
    <span>Foo</span>
    <br>
    <span style="float: right;">Bar</span>
</div>

<强> Using bootstrap (pull-left and pull-right)

<div style="background-color: orange;">
    <span>Foo</span>
    <br>
    <span class="pull-right">Bar</span>
</div>

DEMO（Using In-line style tag）

Answer 2

在span中使用bootstrap class pull-right使其右对齐

<div style="background-color: orange;">
    <span>Foo</span><br>
    <span class="pull-right">Bar</span>
</div>

Answer 3

＆＃13;

＆＃13;

.spanl{
float:right;

}

＆＃13;

<div style="background-color: orange;" class=" ">
<span>Foo</span>
<span class="spanl">Bar</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您只需使用以下代码替换：

<div style="background-color: orange;">
    <span>Foo</span><br>
    <span style="float:right">Bar</span> 
</div>

Answer 5

您可以使用float属性和clearfix。在子元素上使用Float会折叠父元素大小。因此，您需要将clearfix类添加到父级以避免崩溃情况。

.clearfix::after{
    content:"";
    display:table;
}

.floatRight{
  float:right;
}

<div style="background-color: orange;" class="clearfix">
<span>Foo</span>
<span class="floatRight">Bar</span>
</div>