html - 列表样式 : none alters layout

Question

我在 CSS 中格式化无序列表时遇到问题。

下面是一个示例代码片段:

<div class="row">
    <div class="col span-1-of-2 box text-content">
    <ul class="ul-abilities">
        <li>
        <span class="ability-title">C++</span>
            <div class="ability-score-container">
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
            </div>
        </li>
        <li>
        <span class="ability-title">Java</span>
            <div class="ability-score-container">
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
                <span class="ability-score"><i class="fas fa-star"></i></span>
            </div>
        </li>
    </ul>
    </div>
</div>

当我在 CSS 选择器 - .ul-abilities li 中应用 list-style: none 时，li 项的顺序变得不平衡.我不知道我需要做什么来解决这个问题。

CSS 片段:

.ul-abilities li {
    list-style: none; /*--- Troublesome line ---*/
    padding: 5px 0;
}

.ability-title {
    float: left;
    color: #000;
}

.ability-score-container { float: right; }

.ability-score { color: #005fee; }

Answer 1

你需要清除你的 float

.ul-abilities li:after {
    display: table;
    content: '';
    clear: both;
}

https://jsfiddle.net/q05d41dy/