overflowstack9 overflowstack9 - 4 months ago 15
CSS Question

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>




Answer
li {
   list-style-type: none;
}

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