HTML内のアイテムを整列させる

Question

HTMLとCSSでアイテムを整列することについて質問があります。私は価格があり、それらの価格は左に揃えなければならないが、あなたが見ることができるように、これらのアイテムは左に揃えられるが、4は80の0でなければならない。これは価格であり、これはあまり良くないと思う。

私が言いたいことは、これらの価格は手作業で追加された価格ではないということです。これらはAPIで生成されます。あなたが私に与えた解決策では、あなたは数字と小数を分けることができます。この場合、それは1つの数字です。多分、数値を分割してこのように解決する方法があるかもしれませんが、もっと良い解決策があることを願っています。また、私はあなたにテーブルのより良い見方を与えます。よりよく整列しなければならないのは、左側のテーブル行ではなく右側のテーブル行だけです。あなたが写真で見ることができるように。

EDIT： コード：これは、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桁の数字をすべて書式設定するように、2桁の精度が必要であるとします。

ので3218.66のような多数のためのそれは、次のようなのように表示されます。 350のような数字の場合は350.00と表示されます。

だから、精度を決めてからすべてを整列させるだけでいいです。

あなたが言ったように、後でコンテナ<span>または<div>にクラスを使用して、右揃えにすることができます。

Example

Answer 2

あなたが角度素材を使用している場合は、

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

を行うことができますあなたがかもしれないように見えますが、より多くのコードなしで、あなたのコードをしてください置く