CSS: Control space between bullet and

    • 2019-01-03 12:35发布

    站内问答 / HTML/CSS
    903 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条回答
    Deceive 欺骗
    2楼-- · 2019-01-03 13:16

    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!

    查看更多
    0人赞 添加讨论(0) 举报
    Rolldiameter
    3楼-- · 2019-01-03 13:17

    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.

    查看更多
    0人赞 添加讨论(0) 举报
    三岁会撩人
    4楼-- · 2019-01-03 13:17

    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>
    查看更多
    0人赞 添加讨论(0) 举报
    贪生不怕死
    5楼-- · 2019-01-03 13:18

    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.

    查看更多
    0人赞 添加讨论(0) 举报
    该账号已被封号
    6楼-- · 2019-01-03 13:20

    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 {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}
    <ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

    查看更多
    0人赞 添加讨论(0) 举报
    Bombasti
    7楼-- · 2019-01-03 13:20

    use <span style="display: flex;"> inside each <li>.

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