评分框不会与行对齐

Question

我正在使用Bootstrap 4尝试创建一个受IGN启发的游戏网站。我使用脚本填写一系列行，这些行在表行的红色框中显示游戏的标题，发行日期和等级。出于某些奇怪的原因，它并没有完全对齐，这就是我得到的：

那么，如何使它正确排列，以便9.8位于辐射4行中的两行之间，而不是被顶部行刺穿？这是我使用的脚本：

        function fillTables (){
      $.get("/api/tables", function(data) {
        console.log(data);

for (var i = 0; i < data.length; i++) 
        {
          $(".container").append("<div class = 'row'> <div class = 'col-md-10'><p style = 'font-size: 24px'>" + data[i].title + "</p>" + data[i].rel.substring(0, 10) + "</div><div class = 'col-md-2'>" + "<span class = 'mainRating'>" + data[i].rating + "</span></div></div>");
    }

这是我的样式标签：

    <style>

.row
{
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-width: 2px;
    border-top-width: 2px;
}

.mainRating
{
    padding: 20px;
    margin: 5px;
    background-color:red;

}

.container
{
    width: 80%;
    /*adjust this based on screen size.  Big screens its 70%, medium screens its 80%, small screens its 100%*/
}

.card
{
    width: 400px;
}
</style>

Answer 1

这是因为这些<span>是内联元素。尝试将它们变成<div>或添加到CSS：

.mainRating {
  display: block;
}