how to get text aligned vertically with text in list using css


Tags: html,css

Problem :

I am using a background image of a check for my list. The problem is that for some reason text that runs onto the next line for a list item does not align with the text above it, but rather the check image. I have tried using list-style-position: outside; but it does not seem to work.

Here is my code:

li {
  list-style: none;
  margin-bottom: 0.5em;
  text-indent: 1.2em;
  background-image: url(https://placehold.it/15x15);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
  list-style-position: outside;
  line-height: 1.2;
}
.checklist-left {
  width: 50%;
  float: left;
  text-align: left;
}
.checklist-right {
  width: 50%;
  float: right;
  text-align: left;
}
<ul class="checklist-left">
  <li>Improve clarity</li>
  <li>Check formatting</li>
  <li>Improve logical flow</li>
</ul>
<ul class="checklist-right">
  <li>Eliminate irrelevant words</li>
  <li>Verify adherence to stylistic guidelines</li>
</ul>

Here is what it looks like:

enter image description here

Any help appreciated.



Solution :

The problem is that you are using text-indent which will only adjust the first line of text.

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

text-indent (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)

To fix, make the following modifications to your CSS:

  • Remove text-indent: 1.2em; from li
  • Add padding-left: 1.2em; to li

This will apply the padding to the whole left side of the li pushing the content across and allowing the background-image to use blank space.

li {
  list-style: none;
  margin-bottom: 0.5em;
  padding-left: 1.2em;
  background-image: url(https://placehold.it/15x15);
  background-repeat: no-repeat;
  letter-spacing: 1px;
  font-weight: 200;
  font-size: 12px;
  list-style-position: outside;
  line-height: 1.2;
}
.checklist-left {
  width: 50%;
  float: left;
  text-align: left;
}
.checklist-right {
  width: 50%;
  float: right;
  text-align: left;
}
/*Added to make the issue visible in the snippet*/
.checklist-left, .checklist-right {
  padding: 0;
  width: 30%;
}
<ul class="checklist-left">
  <li>Improve clarity</li>
  <li>Check formatting</li>
  <li>Improve logical flow</li>
</ul>
<ul class="checklist-right">
  <li>Eliminate irrelevant words</li>
  <li>Verify adherence to stylistic guidelines</li>
</ul>

list-style-position will have no effect when using a background image as it only influences the position of an actual check mark.

The list-style-position property specifies the position of the marker box in the principal block box.

list-style-position (https://developer.mozilla.org/en/docs/Web/CSS/list-style-position)


    CSS Howto..

    How to search a particular text within an HTML Text and highlight the search string with a color

    how to override left:0 using CSS or Jquery?

    Angular 2: How to change an element’s CSS class onclick and to remove all others (Plnkr)

    How to set a menu as selected while selecting its subchild

    CSS Styles How to make this table not fill the entire page width?

    How to show hide divs INSIDE divs easily?

    How to make a rounded corner rectangle with a cut corner using css?

    CKEditor issue: How to apply custom css to CKEditor [closed]

    How to make a fully responsive web page [closed]

    CSS Chevron Showing Unwanted Rectangle

    How to bound CSS3 animation to class

    How do I achieve a hover over image effect?

    How to put the menu over the content?

    How to “clear” a CSS fake table row?

    Twitter boostrap and css: How to remove the modal overlay and refocus on the input box, so the users can type with the modal open

    How to make css counter works with css selector?

    CSS Menu - how to [closed]

    How can you do this in CSS

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to create spoiler text?

    CSS - How to address only parents and not children

    CSS: How to set procentual width using display:flex?

    activating “authorization” causes CSS stop working! how solve it?

    How to make pagination's circle of slider using CSS only?

    How to highlight one image over other using jquery css? [duplicate]

    CSS how to deal with a lot of sprite without having to create a new css class

    How to apply CSS to elements that have multiple classes?

    How to make a dropdown float with CSS

    How to write css for a color when you only know the color in the RGB format [duplicate]

    How to make input[type=text] to fill remaining horizontal space?