javascript - 使用 css 和 Jquery 在记分牌上垂直对齐头像

Question

我想使用无序列表在计分板上垂直对齐头像图像，这样它们总是可以很好地一个放在另一个下面。问题是，当占用更多空间的数字(例如 100.)时，化身会被推到右侧。如果我想在第一个数字前面放一些东西，例如奖牌图标或类似的东西，问题就会增加。

有没有办法使用 jquery/js 或 css 来保持这些对齐和响应？这是我的代码和代码笔链接:

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

您所要做的就是将宽度设置为您的 .numbers，例如 50px，并将其 display 设置为 inline-block。然后将 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;上下调整线条(相应地调整值)