使用css和jQuery在记分板上垂直对齐化身

Question

我想使用无序列表在计分板上垂直对齐头像图像，因此它们总是很好地放在另一个下方。 问题在于，当占用更多空间的数字（例如100.）时，虚拟形象会从该位置推出到右侧。 如果我想在第一个数字前面放一些东西，例如奖牌图标或类似图标，问题就会越来越严重。

有没有办法使用jquery / js或css使这些保持一致和响应？ 这是我的代码和Codepen链接：

http://codepen.io/anon/pen/RRyama

HTML：

<div class="col-md-6 right__column">
  <ul id="table" class="tableList">
    <p class="tableHeader">Results</p>
    <br>
    <h5 class="tableHeader__name">Scoreboard</h5>
    <hr class="line">
    <li><span class="numbers">1.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">10 points</span> </li>
    <hr class="line">
    <li><span class="numbers">2.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">9 points</span> </li>
    <hr class="line">
    <li><span class="numbers">3.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">8 points</span> </li>
    <hr class="line">
    <li><span class="numbers">4.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">7 points</span> </li>
    <hr class="line">
    <li><span class="numbers">5.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">6 points</span> </li>
    <hr class="line">
    <li><span class="numbers">6.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">5 points</span> </li>
    <hr class="line">
    <li><span class="numbers">7.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">4 points</span> </li>
    <hr class="line line__margin">
    <li class="dots text-center"><span>&bull;&bull;&bull;</span></li>
    <hr class="line line__margin--bottom">
    <li><span class="numbers">20.</span> <img src="https://placeholdit.imgix.net/~text?txtsize=6&txt=50%C3%9750&w=50&h=50" alt="kitten"><span class="name"> John Doe</span><span class="numbers__points pull-right">3 points</span> </li>
  </ul>
</div>
</div>

CSS：

.right__column {
  background-color: grey;
  padding: 0px;
  padding-right: 36px;
}

.tableHeader {
  font-size: 160%;
  margin-top: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  color: white;
}

.tableHeader__name {
  color: white;
  font-size: 110%;
}

.name {
  color: blue;
  font-size: 120%;
}

.tableHeader__points {
  color: white;
}

li {
  list-style-type: none;
  padding: 5px;
}

.dots {
  font-size: 280%;
  letter-spacing: 2px;
  color: black;
  //margin: -10%;
}

.line {
  color: blue;
  border-color: -moz-use-text-color -moz-use-text-color;
}

.line__margin {
  margin-bottom: -3%;
}

.line__margin--bottom {
  margin-top: -3%;
}

.numbers {
  color: white;
  font-size: 130%;
  font-weight: bold;
}

.numbers__points {
  color: white;
  padding: 10px;
  font-size: 130%;
  font-weight: bold;
}

Answer 1

您可以使用number元素来解决：

.numbers {
  color: white;
  font-size: 130%;
  font-weight: bold;
  width: 45px;
  display: inline-block;
  text-align: right;
}

Answer 2

所有您需要做的是宽度设置为您.numbers像50像素，并使其display到inline-block 。 然后将text-align方式更改为右text-align 。 因此，即使数字为9999，它也将完全适合。 增加宽度可以调整数字的可见性

.numbers {
    color: white;
    font-size: 130%;
    font-weight: bold;
    width: 50px;
    text-align: right;
    display: inline-block;
}

用css添加行。 删除“ |” 从标记中，然后将渐变类替换为以下内容

.gradient {
    background: yellow;
    height: 40px;
    width: 5px;
    display: inline-block;
}

您可以使用margin-bottom:-10px;向上和向下调整线条margin-bottom:-10px; （相应地调整值）

Answer 3

我添加了这个，别无其他

img{position:absolute;
display:inline-block;
top:-8px;
left:20%;
margin-left:20px;
}

链接： http ： //codepen.io/damianocel/pen/jAxAEz

我已将li设置为position：relative。

这仅解决了图像问题，但是为您提供了解决其余问题的思路，因为您没有确切指定要处理的其余部分，请告诉我们要怎么做，我会予以修正。 刚刚在我的回复中添加了数字类css，归功于nimpooh，但这仍然无法解决冗长的用户名，但是实际上，其余的现在非常简单。