对齐HTML中左侧的项目[重复]答案

【问题标题】：Align items left in HTML [duplicate]对齐HTML中左侧的项目[重复]
【发布时间】：2016-09-20 17:28:27
【问题描述】：

我有一个关于对齐 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>

我希望有人仍然可以帮助我。

【问题讨论】：

请输入您的代码。
请出示您的代码
你在使用 Angular 材质吗
@BenTaliadoros 是的，我正在使用 Angular 材质
我下面的答案有帮助吗？它们是您添加到元素的属性

标签： javascript html css angularjs

【解决方案1】：

如果你使用的是 Angular Material，你可以这样做

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

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

【讨论】：

不幸的是它没有帮助。你需要更多的代码来解决这个问题吗？请告诉我。

【解决方案2】：

类似的讨论已经完成here。

一种解决方案是...

只需将所有数字设置为具有预定义的小数精度。假设您需要 2 位精度，因此您会将所有数字的格式设置为小数点后两位数。

所以对于像3218.66 这样的数字，它将像这样显示。对于像350 这样的数字，它将显示为350.00。

所以现在您需要做的就是确定精度，然后将它们全部右对齐。

正如你所说，稍后你可以使用容器<span> 或<div> 与类，然后对齐。

Example

【讨论】：