How to reduce space between bullet and text in a centralized ul?

Question

How to reduce space between bullet and text in a centralized ul?

Navigation

#1 by (0 votes)
#2 by (-1 votes)

2

I have a centralized list.

<ul style="text-align: center; list-style-position: inside;">
    <li>abc</li>    
    <li>xyz</li> 
</ul>

The point is that the bullet is too far from the text. I wish you were very close. I have already tried padding and margin in the style of ul and li . But none worked.

html css

asked by anonymous 24.03.2017 / 16:05

2 answers

ASP.Net MVC application with Jquery Bootgrid does not load data How to increase the number of decimals after the comma?

score 0 · Answer 1

Another solution would be to wrap the contents of the LIs in a tag and position it to the left.

li span { position: relative; left: -30px; }

<ul style="text-align: center; list-style-position: inside;">
    <li><span>abc</span></li>    
    <li><span>xyz</span></li> 
</ul>

score -1 · Answer 2

I'm afraid the only solution is for you to do it manually:

    ul {
    list-style-type: none; /*Remove o bullet*/
}

li {
background-position: 0px 50%;
    background-image: url(bullet.jpg); /*adiciona uma imagem*/
    background-repeat: no-repeat;

    padding-left: 7px;
}

See if this works.

references:

link