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选择器list-style: none中应用.ul-abilities li时，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

您需要清除浮动

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

https://jsfiddle.net/q05d41dy/

Answer 2

尝试以下属性并检查

 .ul-abilities li {
        list-style: none;
        padding: 5px 0;
        display: inline-block;
        vertical-align: middle;
    }

Answer 3

将list-style-type: none;应用于<ul>代码，而不是<li> 删除float: left:

＆＃13;

.ul-abilities {
  list-style-type: none;
}

.ul-abilities li {
    padding: 5px 0;
}

.ability-title {
    color: #000;
}

.ability-score-container { float: right; }

.ability-score { color: #005fee; }

＆＃13;

<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>

＆＃13;

Answer 4

这个问题是由我认为浮动造成的。

.ul-abilities li {
    list-style: none;
    padding: 5px 0;
    clear: both;
}

list-style：none改变布局

4 个答案: