Is there is a property to remove the dots from the ul element inside the flexbox

user_16663482 0
Viewed 471

How to remove the dots from the [ ul ] element, I used the { text-decoration: none;} property and it worked. However when I set the container to { display: flex; } it would appear again.

.header ul {
    text-decoration: none ;
    margin: 0;
    padding: 0;
}

.header{
    width: 100%;
    background-color: var(--main-background-color) ;
    display: flex;
    padding: var(--main-padding);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
flexbox html-lists css
4 Answers

Here's how you can remove bullet's

ul{list-style-type:none}
user_166562810

I think you need to use list-style: none;

.container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
<div class='container'>
  <ul>
    <li>this</li>
    <li>is</li>
    <li>an Example</li>
  </ul>
</div>

Admin1

This Might Be A Complete Solution For Your Question

.header ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}
        
.header{
    width: 100%;
    background-color: var(--main-background-color) ;
    display: flex;
    padding: var(--main-padding);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
user_138584440 
    ul{
`        list-style-type:none;
     }
user_166404150
Related