對齊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中的項目

回答

相關問題