Question

我有一个关于在HTML和CSS中对齐项目的问题。我有一个价格，这些价格必须左对齐，但你可以看到这些项目是左对齐，但4必须是80的0.这些是价格，我认为这不是很好。

我忘记提到的一件事是，这些价格并非手动增加价格。这些是使用API生成的。所以在你给我的解决方案中，你可以分割数字和小数。在这种情况下，它是一个数字。也许有一种方法来分割数字并以这种方式解决它，但我希望有一个更好的解决方案。我也给你一个更好的桌子视图。唯一必须更好地对齐的是右表行而不是左表行。正如你在图片中看到的那样。

编辑：代码：这是HTML代码，我也在使用AngularJS

 <td md-cell class="tableWidthSell tableBorderLeft tableInnerCell">
                    <table md-table class="innerTable">
                        <tbody>
                            <tr md-row class="datatableRow" ng-repeat="order in term.timeblocks.INTRADAY.SELL | orderBy: 'price': true">
                                <td flex="100" class="tablePaddingLeft clickable" ng-click="openOrder($event, order)" ng-class="{tableMyOrder: order.mine}">{{order.price|number:2}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <!--Price data | Sell -->
                <td md-cell class="tableWidthSell tableInnerCell">
                    <table md-table class="innerTable">
                        <tbody>
                            <tr md-row class="datatableRow" ng-repeat="order in term.timeblocks.INTRADAY.SELL | orderBy : 'price' : true ">
                                <td flex="100" class="tablePaddingLeft clickable" ng-click="openOrder($event, order)" ng-class="{tableMyOrder: order.mine}">&nbsp;{{order.quantity|number:1}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>

我希望有人能帮助我。

Answer 1

类似的讨论已经完成here。

一种解决方案是......

只需将所有数字设置为具有预定义的小数精度。假设您想要2位数的精度，那么您将格式化所有数字，使其在小数点后面有两位数。

因此对于像3218.66这样的数字，它会像这样显示。对于350这样的数字，它将显示为350.00。

所以现在你需要做的就是决定精度，然后右对齐所有这些。

正如你所说的那样，以后你可以使用一个容器<span>或一个<div>和一个类来对齐，然后再对齐。

<强> Example

Answer 2

如果你正在使用Angular Material，你可以

layout="row" layout-align="start"

看起来你可能会，但没有更多的代码，很难知道

对齐HTML中剩余的项目

2 个答案: