How to keep indent in lists with CSS?


Tags: html,css

Problem :

I have the following code:

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  line-height: 34px;
  list-style-position: inside;
}
<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

See JsFiddle

As you can see, if a list-item ever goes on to a second line it loses the li padding/margin.

Is there any way to allow the subsequent lines to match up to the first line?



Solution :

you can add margin-left:-20px to li:before

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}

.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  margin-left:-20px;
  line-height: 34px;
  list-style-position:inside;
}
<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>

Another solution could be using text-indent:-1em in li

.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content ul {
  list-style: none;
  margin-bottom: 15px;
  line-height: 34px;
  color: rgba(204, 204, 204, 1);
}
.page-content li {
  text-indent: -1em
}
.page-content li:before {
  content: "• ";
  color: green;
  margin-right: 10px;
  line-height: 34px;
  list-style-position: inside;
}
<div class="page-content">

  <ul>
    <li>short bullet</li>
    <li>short bullet</li>
    <li>long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet long bullet</li>
  </ul>

</div>


    CSS Howto..

    How to center a Dijit Select widget?

    How to add colour classes to this css

    How to get an image's height and set its parent height to auto?

    How to use Grunt while continually compressing css / javascript

    how to make keyframe animations in chrome

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

    How to use the Xpath and CSS selector in for function

    How to link an external stylesheet in CSS

    How do I determine if truncation is being applied in my style through JS?

    HTML / CSS: How to get fixed margin between body and footer

    How to fix a double click on a jQuery slide up/down animation?

    How to slide content opening up with jquery

    How to adapt website to user's Screen Resolution?

    How to use CSS Class and ID selectors

    How do I vertically align the text to the middle using CSS?

    how to position two transparent images to overlap opposite corners of a container div

    How use a -ms-expand in GWT (Google Web Tolkit)

    How to properly make my own list-style?

    How to remove or hide element using jquery or css

    CSS: how to make children fit parent's width

    How would I re-position my 2nd bg image “ url(repeat_bg_right_side.png) ” to the right side of page using css?

    How to set a box on bottom of a box?

    How do you select a security authentication modal with a css selector?

    How to build a complex table by using CSS?

    How can I change css for every DOM object in the page in SAPUI5

    How can I disable inherit in CSS?

    How to display a div on hover of button using css

    How to make text slide by only using css/html

    CSS3: How do I make a linear gradient on top of an image suitable for cross browser compatibility?