CODEWITHSUNDEEP
htmlcss
Pradeep Rajagopalan
Pradeep Rajagopalan

Reputation: 1

list-style: none alters layout

I am having trouble formatting unordered list in CSS.

Below is a sample code snippet:

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

When I apply list-style: none inside the CSS selector - .ul-abilities li, the order of li items gets lopsided. I don't know what I need to do to fix this.

CSS snippet:

.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; }

Upvotes: 0

Views: 58

Answers (4)

bnorb
bnorb

Reputation: 138

The problem is caused by the float I think.

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

Upvotes: 0

Gezzasa
Gezzasa

Reputation: 1453

You need to clear your floats

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

https://jsfiddle.net/q05d41dy/

Upvotes: 2

klugjo
klugjo

Reputation: 20885

Apply list-style-type: none; to the <ul> tag and not the <li> Remove the float: left:

.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; }
<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>

Upvotes: 0

PPL
PPL

Reputation: 6555

try below property and check 

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

Upvotes: 0

Related Questions