CODEWITHSUNDEEP
htmlcss
overflowstack9
overflowstack9

Reputation: 345

How remove dots from the list

I want to implement the links with list of details as shown in the below snippet but i want to remove the dotted list i mean i want to display only list without the dots as shown in the below image. I want to achieve like the below image.

image

.sidebarleft h2 {
    margin: 0.0em 0 0.3em;
    letter-spacing: -.001em;
    padding: 5px 10px;
    background: #461B7E url() repeat-x bottom left;
    font: bold 13px Arial;
    color: #fff;
    text-transform: uppercase;
    border-bottom: 1px solid #cccccc;
}



h2 {
    margin: 0.5em 0 .25em;
    font: normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    line-height: 1.4em;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: #4b05bf;
}

.sidebarleft .widget-content {
    margin: 0 auto;
    padding: 5px 9px 5px 10px;
}
.sidebarleft ul {
    list-style: none;
    margin: 0 0 0;
    padding: 0 0 0;
}


.sidebarleft li {
    display: inline;
    margin: 0 auto;
    padding: 0 auto;
}





.sidebarleft a:link, .sidebarleft a:visited {
    color: #0000FF;
    text-decoration: none;
}

.sidebarleft li a {
    font: normal 12px verdana;
    text-transform: none;
    margin: 0;
    padding: 3px 0px 4px 5px;
    display: block;
    text-indent: 0px;
    border-bottom: 1px solid #aebcfd;
    line-height: 1.3em;
}
a:visited {
    color: #0000ff;
    text-decoration: none;
}
a:link {
    color: #4b05bf;
    text-decoration: none;
}

.sidebarleft ul {
    list-style: none;
    margin: 0 0 0;
    padding: 0 0 0;
}

.sidebarleft a:link, .sidebarleft a:visited {
    color: #0000FF;
    text-decoration: none;
}



.sidebarleft li a {
    font: normal 12px verdana;
    text-transform: none;
    margin: 0;
    padding: 3px 0px 4px 5px;
    display: block;
    text-indent: 0px;
    border-bottom: 1px solid #aebcfd;
    line-height: 1.3em;
}
a:visited {
    color: #0000ff;
    text-decoration: none;
}
a:link {
    color: #4b05bf;
    text-decoration: none;
}
.sidebarleft ul {
    list-style: none;
    margin: 0 0 0;
    padding: 0 0 0;
}
<div class="widget Label" data-version="1" id="Label6">
<h2>Latest IT Jobs in India - By Location</h2>
<div class="widget-content list-label-widget-content">
<ul>
<li>
<a dir="ltr" href="">Jobs in Bangalore</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Chennai</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Hyderabad</a>
</li>
<li>
<a dir="ltr" href="">Jobs in India</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Noida</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Mumbai</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Pune</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Gurgaon</a>
</li>
<li>
<a dir="ltr" href="">Jobs In Delhi</a>
</li>
<li>
<a dir="ltr" href="">Jobs in kolkata</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Coimbatore</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Ahmedabad</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Mohali</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Chandigarh</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Jaipur</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Cochin</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Haryana</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Andhra Pradesh</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Indore</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Kochi</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Tamilnadu</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Trivandrum</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Visakhapatnam</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Vijayawada</a>
</li>
<li>
<a dir="ltr" href="">Jobs in Mysore</a>
</li>
</ul>

</div>
</div>

Upvotes: 2

Views: 601

Answers (2)

Elentriel
Elentriel

Reputation: 1237

li {
   list-style-type: none;
}

But you should generally use some classes, writing css for object types is a really bad idea

Upvotes: 5

Sudhanshu sharma
Sudhanshu sharma

Reputation: 1967

You can use below code to hide dots.

ul li{
  list-style: none;
}

You can also add any class name in li and use that class.

Upvotes: 1

Related Questions