CSS根据内容对齐列中的项目

Question

我有以下html代码和自己的css和bootstrap类：

<div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
</div>

和CSS：

.table-string {
    width: 100%;
    text-align: end;
}

我需要接收这样的列：

​

​

但实际上是这样的：

​

​

如何对齐列中没有百分比的值，使它们严格位于彼此之下:数百下，十下，一下？值和百分比也必须在字段的末尾对齐。谢谢你的帮助

Answer 1

作为一种临时解决方案，您可以使用以下内容。只需设置<p>和<span>标签的width: 50%;即可。

​

.table-string {
    width: 50%;
    text-align: end;
}
span.ml-2 {
    width: 50%;
    text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex">
    <p class="table-string">91.86</p>
    <span class="ml-2">(+61%)</span>
</div>
<div class="d-flex">
    <p class="table-string">108.15</p>
    <span class="ml-2">(+108%)</span>
</div>
<div class="d-flex">
    <p class="table-string">329.93</p>
    <span class="ml-2">(+593%)</span>
</div>

​

Answer 2

您需要将行等分成两半，并根据需要对齐文本

<div class="row" style="width:10rem">
    <p class="col-6 p-1 text-end">91.86</p>
    <span class="col-6  p-1 text-start">(+61%)</span>
</div>

这是一个example

如果你还需要什么，请告诉我。

Answer 3

从所有的Div中删除d-flex，并将d-inline放到所有的<p>和<span>中，这样你很可能不需要.table-string的CSS了，所以也要删除它。

例如

<p class="d-inline">91.86</p>
<span class="ml-2 d-inline">(+61%)</span>