位置跨越p标签，因此一部分保留在左侧，另一部分保留在右侧

Question

这是我到目前为止所尝试的内容：

#billingsummary span.billingitem {
    color: White;
    text-align: left;
}

#billingsummary span.billingvalue {
    text-align: right;
}

<p>
    <span class="billingitem">@Model.ProductName</span>
    <span class="billingvalue">$ <span id="billingproductcost">4.00</span></span>
</p>

所以我希望billingitem尽可能远离左边。

我希望billingvalue尽可能向右。

结果不是我想要的：

Answer 1

使用float：

#billingsummary span.billingitem { 
    color: white; 
    float: left; 
} 
#billingsummary span.billingvalue { 
    float: right; 
} 
#billingsummary p {
    clear: both;
}

Answer 2

做浮动：对;和浮动：左;代替。之后的要素应该包括明确：两者;如果你希望它们低于这两个项目。

Answer 3

text-align的作用是将块元素中的文本与指定的一侧对齐：

http://www.w3.org/TR/CSS2/text.html#alignment-prop

Span是内联元素，因此text-align对它们没有影响。你应该浮动它们：

#billingsummary span.billingitem { 
    color: white; 
    float: left; 
} 
#billingsummary span.billingvalue { 
    float: right; 
}

浮动它们会使它们成为块元素并告诉它们处于极端并且不在正常流量之内。如果您对以下元素有疑问，则应clear: both他们