对齐HTML中的项目

-1

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

我忘了提到的一件事是这些价格不是手动添加价格。这些是通过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>

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

来源

2016-09-20 D.Bronder

把你的代码，请。 –

显示您的代码请 – Federico

您使用的是角度材料 –

类似的讨论做here。

一个解决办法是......

只设置了所有的数字有一个预定义的小数精度。假设你想要一个2位数的精度，所以你将格式化所有的数字，在小数点后有两位数字。

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

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

正如你所说的，后来不用线，你可以使用一个容器<span>或<div>与类，以对齐然后正确。

Example

来源

2016-09-20 09:17:53

如果你采用了棱角分明材料，你可以做

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

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

来源

2016-09-20 09:18:25

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

对齐HTML中的项目

回答

相关问题