Question

我正在尝试将内容添加到以下HTML中。我无法访问HTML，只能修改css以获得我想要的结果。

<body>
<div id="wallet">
    <span id="cost">$300.00</span>
    <span id="shipping">$20.00</span>
    <span id="taxes">$10.00</span>
</div>
</body>

我添加的css /内容如下：

#cost, #shipping, #taxes{
display:block;
text-align:right;
width:200px;
}

#cost:before{
content: "SUBTOTAL:";
}
#shipping:before{
content:"SHIPPING:";
}
#taxes:before{
content:"TAXES:";
}

我想要的是将“Shipping：”，“Taxes：”和“Subtitle：”中的所有分号垂直对齐。然后所有美元价值在跨度内齐平。因此，冒号和美元价值之间的空间会有所不同。这只能使用css吗？我已经尝试了许多组合，尝试将之前的内容浮动，然后将文本对齐，但这不起作用。

另外，我无法访问变量来产生美元金额。所以，我无法计算该值是2位数，3位数等，并从那里设置css值。

如果这是不可能的话，此时我会满足于使用“运费：”，“销售税：”和“总计：”所有对齐的左边，美元价值对齐。也不能让这个工作。

提前致谢！

Answer 1

您可以浮动并调整伪元素的大小： DEMO

CSS：

#cost, #shipping, #taxes{
display:block;
text-align:right;
width:200px;
}
#wallet span:before {/* rule added */
  float:left;
  width:50%;/* tune this to your needs */
}
#cost:before{
content: "SUBTOTAL:";
}
#shipping:before{
content:"SHIPPING:";
}
#taxes:before{
content:"TAXES:";
}

Answer 2

非常简单，你只需要浮动你的伪类，并相应地调整边距。

演示小提琴：http://jsfiddle.net/vSV48/2/

#cost:before{
    content: "SUBTOTAL:";
    float: left;
}
#shipping:before{
    content:"SHIPPING:";
    float: left;
    margin-left: 9px;
}
#taxes:before{
    content:"TAXES:";
    float: left;
    margin-left: 31px;
}

Answer 3

你可以使用align-content：flex-end;将价格推向正确的范围。

HTML

<div id="wallet">
    <span id="cost">$300.00</span>
    <span id="shipping">$20.00</span>
    <span id="taxes">$10.00</span>
</div>

CSS

#cost, #shipping, #taxes{
display:block;
text-align:right;
width:200px;
    border: 1px solid black;
    align-content: flex-end;
}

#cost:before,
#shipping:before,
#taxes:before{
float: left;
}

#cost:before{
content: "SUBTOTAL:";
}
#shipping:before{
content:"SHIPPING:";
}
#taxes:before{
content:"TAXES:";
}

检查此演示：http://jsfiddle.net/HalilTeker/vyAdE/

Answer 4

您可以使用绝对定位对齐生成的内容标签：

#cost, #shipping, #taxes {
    display:block;
    text-align:right;
    width:200px;
    border: 1px dotted blue;
    position: relative;
}
#cost:before {
    content:"SUBTOTAL:";
}
#shipping:before {
    content:"SHIPPING:";
}
#taxes:before {
    content:"TAXES:";
}
#wallet *:before {
    background-color: yellow;
    position: absolute;
    right: 50%;
}

使用right伪元素上的:before偏移量来定位标签右侧的标签美元价值。

请参阅演示：http://jsfiddle.net/audetwebdesign/pepbk/

这种方法的优点是无论文字长度或字体大小如何，标签都是右对齐的，更加健壮。

对齐内容：在跨度之前

4 个答案: