how to remove the bullet point of this code using css

Question

I want to remove the bullet point for this code. tried many ways but no luck. any help?

<div class="widget wpcw-widgets wpcw-widget-contact">
    <ul>
        <li class="has-label">Name</li>
        <li class="has-label">Address</li>
        <li class="has-label">Country</li>
        <li class="has-label">Address</li>
        <li class="has-label">Country</li>
    </ul>
</div>

Possible duplicate of [Need an unordered list without any bullets](https://stackoverflow.com/questions/1027354/need-an-unordered-list-without-any-bullets) — Patrick Mlr, Aug 30 '17 at 06:24
Possible duplicate of [Getting rid of bullet points from
](https://stackoverflow.com/questions/8289805/getting-rid-of-bullet-points-from-ul) — Govind Samrow, Aug 30 '17 at 06:25

score 2 · Answer 1 · answered Aug 30 '17 at 06:20

.widget ul li{ list-style-type: none;}

<div class="widget wpcw-widgets wpcw-widget-contact">
    <ul>
        <li class="has-label">Name</li>
        <li class="has-label">Address</li>
        <li class="has-label">Country</li>
        <li class="has-label">Address</li>
        <li class="has-label">Country</li>
    </ul>
</div>

score 1 · Answer 2 · answered Aug 30 '17 at 07:28

As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.

.wpcw-widget-contact ul {
  list-style: none;
}

<div class="widget wpcw-widgets wpcw-widget-contact">
    <ul>
        <li class="has-label">Name</li>
        <li class="has-label">Address</li>
        <li class="has-label">Country</li>
        <li class="has-label">Address</li>
        <li class="has-label">Country</li>
    </ul>
</div>

You also might be interested to look up more details about the CSS property used on this answer.

how to remove the bullet point of this code using css

2 Answers2