<li style="list-style-position: inside">Link 1</li>
<li style="list-style-position: outside">Link 2</li>
Looks rather like:
# The text goes
here and the bullet
is "inside" of the block.
versus:
# The text goes
here and the bullet
is "outside" of the block.
whereby the "#" is your "bullet". Note that the top, the 'bullet' is indented into the text, and the secopnd example, it is 'outdented' outside of the text. This is more useful for <li> text....text etc text....etc </li> and less useful for anchor/hyperlinks).
and you can also (as per KDLA), add padding.
and now, -let's soup it up a bit.... -You have a <ul> with 40 or 50 <li>? Don't want to have 40 or 50 instances of "<li style="list-style-type:inside;">"? then, let's short-hand this to:
CSS:
<style>
#navs {}
#navs ul {}
#navs ul li {list-style-type:inside;}
</style>
and
HTML:
<div id="navs">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>...etc.
...
</li>Fifty</li>
</ul>
</div>
and ALL "<li>" in the DIV "navs" will have "<li style="list-style-type:inside;">" applied to them. -Saves a ton of typing! And, if MORE "<li>s" are added to the DIV "navs", they will all have the same style applied to them automatically... :D (Not to mention, your page will be a few KB smaller, for faster load-times and reduced bandwidth consumption).