列表项的零缩进

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 上，这很糟糕，但我们现在不用担心这个。

这将使埃及获得<article> 的text-indent 属性。但是，我希望这种情况不要发生。我希望列表项埃及的文本缩进为 0！

怎么做？

检查js-fiddle。

Answer 1

将text-indent: 0px 移动到li 而不是a，如下面的sn-p 所示。

text-indent property applies only to block containers。 li 是块容器，而 a 不是，因此将其设置为 a 无效。

此外，此属性是一个继承属性，这就是为什么 li 从 article 获取 40px 作为值的原因。如果您检查 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>

Answer 2

问题已解决，从文章中删除样式并将其应用于 p

Working Fiddle

<article>
<p style="font-size:16px;text-indent:40px;line-height:1.5em;">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><a title="Egypt" href="#egypt">Egypt</a></li>
</ul>
</article>

Answer 3

从 HTML 中删除 style="(...)" 并添加它，也许这会有所帮助：

ul {
    list-style-position: inside;
    padding-left:0;
}

就是这样，只有这几行。