I have an unordered list that I am applying a class to that sets the list-style and list-style-image to none. Is there a way to get the list item to be positioned where the list image/bullet would have been if it was showing? Now that I have removed the bullet, the items seem to be too far to the right.
my code is:
.noBullet { list-style:none; list-style-image:none; }
<ul class="noBullet">
<li class="head">Header</li>
<li class="subHead"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Sub Header</a>
<ul class="others">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li class="subHead"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Sub Header 2</a>
<ul class="others">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>ul, li {
margin:0;
padding:0;
}
my code is:
.noBullet { list-style:none; list-style-image:none; }
<ul class="noBullet">
<li class="head">Header</li>
<li class="subHead"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Sub Header</a>
<ul class="others">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li class="subHead"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Sub Header 2</a>
<ul class="others">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
</ul>ul, li {
margin:0;
padding:0;
}