I'd like to control how much horizontal space a bullet pushes its <li>
to the right in an <ol>
or <ul>
.
That is, instead of always having
* Some list text goes
here.
I'd like to be able to change that to be
* Some list text goes
here.
or
*Some list text goes
here.
I looked around but could only find instructions for shifting the entire block left or right, for example, http://www.alistapart.com/articles/taminglists/
This question is related to
html
css
html-lists
Using text-indent on li works best.
text-indent: -x px; will move the bullet closer to li and vice-versa.
Using relative on span the negative left might not work properly with older versions for IE. P.S- avoid giving positions as much as you can.
You can use:
ul li { padding-inline-start: 15px; }
For list-style-type: inline:
It's almost the same like DSMann8's answer but less css code.
You just need to
<style>
li:before {
content: "";
padding-left: 10px;
}
</style>
<ul>
<li>Some content</li>
</ul>
Cheers
ul
{
list-style-position:inside;
}
Definition and Usage
The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.
Source: http://www.w3schools.com/cssref/pr_list-style-position.asp
Use padding-left:1em; text-indent:-1em
for the <li>
tag.
Then, list-style-position: inside
for the <ul>
tag.
<ul style='list-style-position: inside;'>
<li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>
The following solution works well when you want to move the text closer to the bullet and even if you have multiple lines of text.
margin-right
allows you to move the text closer to the bullet
text-indent
ensures that multiple lines of text still line up correctly
li:before {_x000D_
content: "";_x000D_
margin-right: -5px; /* Adjust this to move text closer to the bullet */_x000D_
}_x000D_
_x000D_
li {_x000D_
text-indent: 5px; /* Aligns second line of text */_x000D_
}
_x000D_
<ul>_x000D_
<li> Item 1 ... </li>_x000D_
<li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>_x000D_
<li> Item 3 ... </li>_x000D_
</ul>
_x000D_
It seems you can (somewhat) control the spacing using padding on the <li> tag.
<style type="text/css">
li { padding-left: 10px; }
</style>
The catch is that it doesn't seem to allow you to scrunch it way-snug like your final example.
For that you could try turning off list-style-type and using •
<ul style="list-style-type: none;">
<li>•Some list text goes here.</li>
</ul>
You can use ul li:before
and a background image, and assign position: relative
and position:absolute
to the li
and li:before
, respectively. This way you can create an image and position it wherever you want relative to the li.
An unordered list starts with the ul tag. Each list item starts with the The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>Normal List </h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
<!DOCTYPE html>
<html>
<body>
<h2>Normal List </h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
<ul style='text-indent: -7px;'>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
There seems to be a much cleaner solution if you only want to reduce the spacing between the bullet point and the text:
li:before {
content: "";
margin-left: -0.5rem;
}
You can just give a padding-left
to your <li>
element.
If your list-style is inside
then you could remove the bullet and create your own ... e.g. (in scss!)
li {
list-style: none;
&:before {
content: '- ';
}
}
And if you list style is outside
then you could do something like this:
li {
padding-left: 10px;
list-style: none;
&:before {
content: '* '; /* use any character you fancy~! */
position: absolute;
margin-left: -10px;
}
}
To summarise the other answers here – if you want finer control over the space between bullets and the text in a <li>
list item, your options are:
(1) Use a background image:
<style type="text/css">
li {
list-style-type:none;
background-image:url(bullet.png);
}
</style>
<ul>
<li>Some text</li>
</ul>
Advantages:
background-position
to position the image pretty much anywhere you want in relation to the text, using pixels, ems or %Disadvantages:
2. Use padding on the <li>
tag
<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>
<ul>
<li>Some text</li>
</ul>
Advantages:
<li>
, you can add as much extra horizontal space between the bullet and the text as you likeDisadvantages:
(3) Wrap the text in an extra <span>
element
<style type="text/css">
li {
padding-left:1em;
color:#f00; /* red bullet */
}
li span {
display:block;
margin-left:-0.5em;
color:#000; /* black text */
}
</style>
<ul>
<li><span>Some text</span></li>
</ul>
Advantages:
padding-top
to the <span>
. Someone else may have a workaround for this, though...)Disadvantages:
Here's hoping for some new list-style features in CSS4, so we can create smarter bullets without resorting to images or exta mark-up :)
Old question but still relevant.
I recommend using negative text-indent
.
list-style-position
must be outside
.
Pros:
Cons:
Old question, but the :before pseudo element works well here.
<style>
li:before {
content: "";
display: inline-block;
height: 1rem; // or px or em or whatever
width: .5rem; // or whatever space you want
}
</style>
It works really well and doesn't require many extra rules or html.
<ul>
<li>Some content</li>
<li>Some other content</li>
</ul>
Cheers!
This should do it. Be sure to set your bullets to the outside. you can also use CSS pseudo elements if you can drop them in IE7 downward. I don't really recommend using pseudo elements for this kinda thing but it does work to control distance.
ul {_x000D_
list-style: circle outside;_x000D_
width: 100px;_x000D_
}_x000D_
_x000D_
li {_x000D_
padding-left: 40px;_x000D_
}_x000D_
_x000D_
.pseudo,_x000D_
.pseudo ul {_x000D_
list-style: none;_x000D_
}_x000D_
_x000D_
.pseudo li {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */_x000D_
.pseudo li:before {_x000D_
content: '\2192';_x000D_
position: absolute;_x000D_
left: 0;_x000D_
}
_x000D_
<ul>_x000D_
<li>Any Browser really</li>_x000D_
<li>List item_x000D_
<ul>_x000D_
<li>List item</li>_x000D_
<li>List item</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>_x000D_
_x000D_
<ul class="pseudo">_x000D_
<li>IE8+ only</li>_x000D_
<li>List item_x000D_
<ul>_x000D_
<li>List item with two lines of text for the example.</li>_x000D_
<li>List item</li>_x000D_
</ul>_x000D_
</li>_x000D_
</ul>
_x000D_
You can use the padding-left
attribute on the list items (not on the list itself!).
Here is another solution using css counter and pseudo elements. I find it more elegant as it doesn't require use of extra html markup nor css classes :
ol,
ul {
list-style-position: inside;
}
li {
list-style-type: none;
}
ol {
counter-reset: ol; //reset the counter for every new ol
}
ul li:before {
content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}
ol li:before {
counter-increment: ol;
content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}
I use non breakable spaces so that the spacing only affects the first line of my list elements (if the list element is more than one line long). You could use padding here instead.
You can also use a background image replacement as an alternative, giving you total control over vertical and horizontal positioning.
See the answer to this Question
Source: Stackoverflow.com