使用css和Jquery在记分板上垂直对齐头像

Align avatars vertically on a scoreboard using css and Jquery

本文关键字：垂直 对齐 记分板 css Jquery 使用      更新时间：2023-09-26

我想使用无序列表在记分板上垂直对齐化身图像，这样它们总是很好地放在一个下面。问题是，当数字占用更多空间（如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;
}

您所要做的就是将宽度设置为.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;向上和向下调整行（相应地调整值）

您可以使用修复数字元素的：

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

我添加了这个，没有添加其他

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

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

我已经将李设置为位置：相对。

这只修复了图像问题，但让你知道如何修复其余部分，因为你没有确切地指定如何处理其余部分，告诉我们该做什么，我会修改它。只是在我的回复下添加了数字类css，归功于nimpooh，然而这仍然不会处理冗长的用户名，但实际上，其余部分现在非常简单。

相关文章：