How to reduce space between Bullet and text in a centralized <ul>?

Asked

Viewed 541 times

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 Bullet is very far from the text. I would like it to be very close. I have tried padding and margin in the style of ul and of li. But none worked.

html css

  • try this: <li><span>abc</span><li> and in css do ul li { position:relative; left:-5px; }

  • Hello, thank you for the answer. Have you tested this solution? For me it didn’t work. Or I’m doing it wrong. <ul style="text-align: center; list-style-position: Inside;"> <li style="position:relative; left:-5px;"><span>abc</span></li> </ul>

  • do not apply styles within tag li or ul, tag them style or in an archive css.

2 answers

2

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>

  • worked! Thank you very much. I voted a +1 for you but as I am new user, my vote is not visible was the response I received from the system.

  • now I noticed that have variation of browser for browser. Putting -5px in firefox is good, but Chrome is super distant.

-1

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:

http://www.escolaw3.com/tutoriais/css/listas

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.