英文:
Can't get Bootstrap Card to align text properly
问题
这是一个排行榜类型的东西，用于工作。
这是一个Bootstrap元素，我想要数字右对齐，数字应该垂直对齐。查看当前显示的示例图片：点击这里查看图片
这是代码，我使用EJS来循环处理这个，因此只有一个实例，我已将所有的EJS元素转换为普通的HTML：
<div class="card d-flex" style="display: inline-block; width: 350px; float: right; margin-right: 100px;">
<ul class="list-unstyled card-body mb-0 pb-0">
<li class="media mb-3">
<div class="media-body">
<div style="display: inline-block;">
<strong style="font-size: 20px;">Jordan</strong>
<p class="float-right pull-right" style="padding-left: 200px; font-size: 20px; font-weight: 650;">12</p>
</div>
<div class="progress mb-1" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%; background-color: green;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
</div>
尝试使用text-align、float、pull-right、text-right、mt-auto等方法都没有生效。
英文:
I have a leaderboard sort of thing, this is for something at work.
This is a bootstrap element and I want the numbers to be aligned to the right, the numbers should be vertically aligned. See example of how it currently looks on the image: enter image description here
Here is the code, I use EJS to for loop this, hence only 1 instance, I've translated all EJS elements to normal HTML:
<div class="card d-flex" style="display: inline-block; width: 350px; float: right; margin-right: 100px;">
<ul class="list-unstyled card-body mb-0 pb-0">
<li class="media mb-3">
<div class="media-body">
<div style="display: inline-block;">
<strong style="font-size: 20px;">Jordan</strong>
<p class="float-right pull-right" style="padding-left: 200px; font-size: 20px; font-weight: 650">12</p>
</div>
<div class="progress mb-1" style="height: 10px;">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%; background-color: green" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</li>
</ul>
</div>
Tried using text-align, float, pull-right, text-right, mt-auto etc. doesn't do anything.
答案1
得分: 0
如果您不需要它出于其他原因，您可以将 display: inline-block 替换为 display: flex; justify-content: space-between。这样可以使它占据两个文本元素之间的最大空间，姓名的长度不会影响数字的位置 
英文:
If you don't require it for some other reason you can replace display: inline-block with display: flex; justify-content: space-between
This should space it so it takes up the maximum amount of space between the 2 text elements and the length of the name wont effect the number position
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论