CSS: Control space between bullet and

    • 2019-01-03 12:35发布

    站内问答 / HTML/CSS
    904 15 5

    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/

    15条回答
    放荡不羁爱自由
    2楼-- · 2019-01-03 13:22 
    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

    查看更多
    0人赞 添加讨论(0) 举报
    干净又极端
    3楼-- · 2019-01-03 13:23

    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>
    查看更多
    0人赞 添加讨论(0) 举报
    老娘就宠你
    4楼-- · 2019-01-03 13:23

    Old question but still relevant. I recommend using negative text-indent. list-style-position must be outside.

    Pros:

    • Bullet is properly automatically positioned
    • Change font size does not break the bullet position
    • No extra elements ( no ::pseudo-elements too )
    • Works for both RTL and LTR without change in CSS.

    Cons:

    • try
    • to
    • find
    • one :)
    查看更多
    0人赞 添加讨论(0) 举报
    上一页 1 2 3
    登录 后发表回答
    相关问题
    查看全部
    相关文章
    查看全部
    收藏的人(5)