将钱数对齐左侧引导程序

时间:2018-04-19 07:51:17

标签: html css twitter-bootstrap bootstrap-4

嗨,我有一些货币编号对齐的麻烦。我希望我的数据与列的左侧对齐但是钱的数量必须像屏幕截图中那样相互关联。

这个截图是我的主题:

enter image description here

这就是我想要做的事情:

enter image description here

这是我的结构:

<tr> 
  <td style="text-align: left">name</td>
  <td style="text-align: right">money</td>
  <td style="text-align: center">date</td>
</tr>

我用于定位的唯一的css atm是将每个td的widht设置为30%

起初我以为我可以简单地将<p>放在那里,将内容与右边对齐,然后给予其余部分相对的宽度来定位它们,不过这样就可以了,但后来我得到了一个球js或jquery,我不喜欢。

我已经安装了bootstrap但是截至目前我还没有在这个项目中触及它,除了列网格定位。

有没有人有某种方法可以实现我的目标,或者有人可以推动我朝着正确的方向前进?提前谢谢。

附加:半完整代码示例: Codepen

上面的代码是表格所在的整个部分,但我复制了所有相对于问题的css而不是每个css类我的问题都在那里重建,甚至我试过的随机<p>标签都在那里。

1 个答案:

答案 0 :(得分:1)

您应该使用两列:

<div class="row">
  <div class="col-lg-6">List of money values</div>
  <div class="col-lg-6">[Empty]</div>
</div>

在第一个文本中将文本对齐:

<p class="text-right">Your text.</p>