Text indentation in unordered lists with CSS

css list styling unordered
Frank Vilea picture Frank Vilea · Apr 20, 2011 · Viewed 15k times · Source

I have an unordered HTML list and am using CSS to style everything. When the text has multiple lines, it starts before the bullet point. Is there a way to make it start after the bullet point position?

enter image description here

Answer

Wesley Murch picture Wesley Murch · Apr 20, 2011

You want to use list-style-position:outside on your <ul>

JsFiddle

Related questions

How can change width of dropdown list?

I have a listbox and I want to decrease its width. Here is my code: <select name="wgtmsr" id="wgtmsr" style="width: 50px;"> <option value="kg">Kg</option> <option value="gm">Gm&…

Read More
Hide Show content-list with only CSS, no javascript used

I've been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I've managed to make this action: <!DOCTYPE html> <head> <style> #cont {display: …

Read More
li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

After proudly coloring my liststyle bullet without any image url or span tags, via: ul{ list-style: none; padding:0; margin:0; } li{ padding-left: 1em; text-indent: -1em; } li:before { content: "■"; padding-right:7px; } Although these stylesheets work perfectly down to the rounded borders …

Read More