Question

如何缩进超链接呢？我试过这个代码但没有成功。

a {
  text-decoration: none;
  text-indent: 20px;
}

 <a href="#h"> html </a>

Answer 1

如果您不希望缩进所有超链接，可以将其包裹在具有唯一ID的<div>周围;这是另一种解决方案。

HTML：

<div id="indented">
    <a href="#h"> html </a>
</div>

CSS：

a{
    text-decoration:none;
}

#indented {

    text-indent:20px;

}

Answer 2

text-indent对内联元素不可用

https://www.w3.org/wiki/CSS/Properties/text-indent

a {
  text-decoration: none;
  text-indent: 20px;/* not avalaible for inline elements */  
  display: inline-block;
}

<a href="#h"> html </a>

填充可以帮助

a {
  text-decoration: none;
  text-indent: 20px;/* not avalaible for inline elements */  
  padding-left:20px;;
}

<a href="#h"> html </a>

Answer 3

将其放入CSS文件中，并使用链接标记将其链接到HTML文件：

    a {
      text-decoration:none;
      text-indent:20px;
    }

我强烈建议使用CSS文件，它更清晰，并且允许您定位更多元素，而不仅仅是特定的锚标记

Answer 4

text-indent适用于块或内联块元素。因此，您可以将display: inline-block;或display: block;分配给a代码并获得所需的效果。这是一个演示http://codepen.io/anon/pen/WRvOQd