Menu
How can I reduce default gap between bullet and text in an <li>?
I want to reduce gap between the bullet and "I".
431
I'm not sure whether this is the best way to do it, but you could specify a negative text-indent:
li {
text-indent: -4px;
}
...where your HTML code looks like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
(Tested in Safari 4.0.4 and Firefox 3.0.11.)
186
You could achieve this by setting the list-style-type to none, and setting the background-image of a list element to a generic bullet, like so:
ul {
list-style-type: none;
}
li {
background-image: url(bullet.jpg);
background-repeat: no-repeat;
background-position: 0px 50%;
padding-left: 7px;
}
The outcome would look a little something like this:
With this approach, you aren't adding unnecessary span (or other) elements to your lists, which is arguably more practical (for later extendibility and other semantic reasons).
30
You could try the following. But it requires you to put a <span> element inside the <li> elements
<html>
<head>
<style type="text/css">
ul.a li span{
position:relative;
left:-0.5em;
}
</style>
</head>
<body>
<ul class="a">
<li><span>Coffee</span></li>
<li><span>Tea</span></li>
<li><span>Coca Cola</span></li>
</ul>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
