列表项的零缩进

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 has to lie upon html 很糟糕，但现在。

让我们不用担心

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

怎么做？

检查js-fiddle。

Answer 1

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

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

此外，这个属性是继承的属性，这就是 li 从 article 中获取 40px 作为值的原因。如果您检查 li 并查看 "Computed" 样式部分，您会注意到这一点。

<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

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

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

就是这样，只有这些行。

Answer 3

问题已解决，从文章中删除样式并将其应用于 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>

列表项的零缩进

Zero indent for list items

html

css

text

text-indent

html-lists