使用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，但這仍然無法解決冗長的用戶名，但是實際上，其余的現在非常簡單。