Question

我有三个超链接显示在同一行，我想将所有三个链接向右移动指定的像素数。下面是我的代码，我尝试了文本缩进，但它无法正常工作......

nav a {
  background-color: #ccff99;
  color: #333333;
  border-style: solid;
  border-color: #333333;
  border-width: 1px;
  text-decoration: none;
  font-weight: bold;
  text-indent: 20px;
}

<nav>
  <a href="#">Home</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Answer 1

尝试这样的事情：

nav a {
  background-color: #ccff99;
  color: #333333;
  border-style: solid;
  border-color: #333333;
  border-width: 1px;
  text-decoration: none;
  font-weight: bold;
  text-indent: 20px;
}

nav a:first-child {
  margin-left: 20px;
}

<nav>
  <a href="#">Home</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Answer 2

nav a { //Your previous styles. Use padding-left instead of text-indent padding-left: 20px; }

如果您在每个锚元素之前寻找一些空格，那么添加padding-left就足够了。

Answer 3

如果您想在每个链接的左侧添加20个像素的空间，请尝试：

nav a {
  background-color: #ccff99;
  color: #333333;
  border-style: solid;
  border-color: #333333;
  border-width: 1px;
  text-decoration: none;
  font-weight: bold;
  margin-left: 20px;

}

请记住，填充调整给定元素内的间距，这就是为什么你的边框在左边额外被推了20个像素。如果你想在链接中添加额外的空间，那么你就可以使用填充。

缩进相同行的超链接

3 个答案: