html - 位置跨度在 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;
}