gsamaras gsamaras - 6 months ago 14
HTML Question

Zero indent for list items

My code is structured like this:

<article style="font-size:16px;text-indent:40px;line-height:1.5em;">
<ul>
<li><a title="Egypt" href="#egypt" style="text-indent:0px;padding-left: -25cm;">Egypt</a></li>
</ul>
</article>


and yes, it is terrible that the has to lie upon , but let's not worry about that now.

This will make Egypt get the
text-indent
property of the
<article>
. However, I would like this not to happen. I would like Egypt, the list item, to have 0 text indentation!

How to do it?

Check the js-fiddle.

Answer

Move the text-indent: 0px to the li instead of the a like in the below snippet.

The text-indent property applies only to block containers. li is a block container whereas the a is not and hence setting it on a has no effect.

Also, this property is an inherited property and that is the reason why the li gets 40px as value from article. You'd notice this if you inspect the li and have a look at the "Computed" styles section.

<article style="font-size:16px;text-indent:40px;line-height:1.5em;">
  <p>
    Goal of this page is to laconically detail where I, <strong>Georgios Samaras</strong> have travelled, since I am asked again and again and usually I forgot some places.
  </p>
  <p>
    I will list (in random order) were I have been to and say some more about the non-Greek places I have been after 2012. It's also good to write down the memories... :)
    <ul>
      <li style="text-indent: 0px;"><a title="Egypt" href="#egypt">Egypt</a>
      </li>
    </ul>
</article>

Comments