如何让价格表排成一行？

Question

在以下网站上，我试图让价格均匀排列，以便在您下到页面时“up”这个词不均匀。基本上我希望右边的单词像左边的单词一样好看。我试过为文本辩护，但这不起作用。这是一个截图：

Answer 1

您可以使用有组织的标记，并为您的小点使用border: dashed或border: dotted。然后你把价格浮到右边瞧！容易重复使用的产品价格关系！

参见JSFiddle：http://jsfiddle.net/A3tKF/3/

<强> HTML：

<section class="productList">
    <div class="product">
        <span class="name">Example Product</span><span class="price">$2</span>
    </div>
    <div class="product">
        <span class="name">Example Product</span><span class="price">$2</span>
    </div>
</section>

<强> CSS：

.productList {
    width: 500px;
}
.product {
    border-bottom: 1px dashed #aaa;
}
.product .name {
    font-weight: bold;
}
.product .price {
    float: right;
}

最重要的部分是CSS，特别是.product和.product .price规则：

• border-bottom将元素下的边框设置为1px虚线浅灰色
• float使元素与右边对齐，对自由空间更加宽容。