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的{{1}}属性。但是，我希望这不会发生。我希望列表项目埃及有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并查看“计算”样式部分，您会注意到这一点。

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

就是这样，只有这些线。

列表项的零缩进

3 个答案: