how to reduce default gap between bullet and text in <li>?
- Item 1
- Item 2
- Item 3
I want to reduce gap between bullet an I
views:
493answers:
5
+1
A:
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.)
Steve Harrison
2010-03-14 03:20:23
it's not working
metal-gear-solid
2010-03-14 03:21:29
it brings li outside the div in firefox
metal-gear-solid
2010-03-14 03:25:55
@jitendra: What does the relevant HTML code look like?
Steve Harrison
2010-03-14 03:28:30
<ul> <li>item1</li> </ul>
metal-gear-solid
2010-03-14 03:31:18
i got it i'm using list-style-position:inside; on <ul> also and ur solution not working with it but works without it. and why i'm using list-style-position:inside; on <ul> bcoz li bullets was going outside the div
metal-gear-solid
2010-03-14 03:39:50
A:
Edited
Edited
You might try using:
li {list-style-position: inside; }
But I can't remember if that adjusts the space, or changes where the space occurs.
Edited
The above doesn't seem to make any substantial difference. There doesn't seem to be any way to decrease the space between the list-style-type marker and the text, though it can be increased using margin-left or text-indent.
Sorry I can't be of more use.
Edited
Just out of curiosity, how about 'faking' the bullet with a background image?
ul {list-style-type: none;
margin: 0;
padding: 0;
}
ul li {background: #fff url(path/to/bullet-image.png) 0 50% no-repeat;
margin: 0;
padding: 0 0 0 10px; /* change 10px to whatever you feel best suits you */
}
It might allow for more fine-tuning.
David Thomas
2010-03-14 03:24:37
@jitendra, see the edits; though I'm not sure if they'll make a huge difference.
David Thomas
2010-03-14 03:42:26
+1
A:
This is one way.
li span {
margin-left: -11px;
}
<ul>
<li><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
mark123
2010-03-14 03:38:14
A:
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:-10px;
}
</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>
ferrari fan
2010-03-14 03:42:25
+3
A:
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).
Bauer
2010-03-14 04:40:41