列表项的零缩进

Question

我的代码结构如下:

<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>

是的,css必须依赖html是可怕的,但现在让我们不要担心.

这将使埃及获得该text-indent财产<article>.但是,我希望这不会发生.我希望列表项目埃及有0个文本缩进!

怎么做？

检查js-fiddle.

Answer 1

在下面的代码段中移动text-indent: 0px到li而不是a像.

该text-indent物业仅适用于街区集装箱.li是一个块容器,而a 不是,因此设置它a没有任何影响.

此外,此属性是一个继承属性,这就是为什么从li40px获取值的原因article.如果您检查li并查看"计算"样式部分,您会注意到这一点.

<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>