erjiang erjiang - 4 months ago 12
HTML Question

CSS: Control space between bullet and <li>

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/

Answer

Put its content in a span which is relatively positioned, then you can control the space by the left property of the span.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4373046</title>
        <style>
            li span { position: relative; left: -10px; }
        </style>
    </head>
    <body>
        <ul>
            <li><span>item 1</span></li>
            <li><span>item 2</span></li>
            <li><span>item 3</span></li>
        </ul>
    </body>
</html>
Comments