Dhruv Ghulati Dhruv Ghulati -4 years ago 137
CSS Question

Add indents to bullet points

I am looking at getting an effect like:

enter image description here

But my current effect is:

enter image description here

What do I need to add to my css to get the indent to work like the effect I want, so the second line of any bullet point is indented? currently the HTML setup is just

<ul><li></li><ul>
with the CSS being:

li {
margin-left: 10px;
list-style-position: inside;
}


And also incorporating Bootstrap via:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


All of this bullet list is overall within a
<section>
with styling:

section {
padding: 0;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 26px;
letter-spacing: 1px;
color: #666;
}

Answer Source

By default you get the desired effect your use of list-style-position: inside; is messing it up for you.

<ul>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus magnam nobis, nulla dolore accusamus.</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus magnam nobis, nulla dolore accusamus.</li>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus magnam nobis, nulla dolore accusamus.</li>
 <ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download