Question

I've been trying to format the following code (HTML part).

.buttons {
  text-align: center;
}

a.buttons {
  font-family: 'PT Sans';
  color: white;
  font-size: 20px;
  background-color: gray;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: padding 1s;
}

a.buttons:hover {
  background-color: lightgray;
  padding: 20px 30px;
}

<div class="buttons"><a href="index.html">Home</a>
<a href="http://linkto.bandcamp.com">Bandcamp</a>
<a href="C:\Users\asdffds\Desktop\website\management.html">Booking</a>
<a href="#news">News</a>
</div>

But I can't seem to get it work. Can someone help find the mistake?

Answer 1

应该是

.buttons a{

 }

.buttons a:hover{

 }

Answer 2

当你说

时

a.buttons {

}

您要告诉所有在 a 标记内的名称为按钮的类添加样式。这实际上是另一种方式。所以它应该是：

.buttons a {

}

Answer 3

用以下代码替换按钮css。由于锚标签位于带有类按钮的div内，我们需要使用其父容器（即div.buttons）定位锚标签

.buttons a {
  font-family: 'PT Sans';
  color: white;
  font-size: 20px;
  background-color: gray;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: padding 1s;
}

.buttons a:hover {
  background-color: lightgray;
  padding: 20px 30px;
}

并使用链接的相对路径，因为我可以看到一些链接指向您的c驱动器。例如，如果您的根目录中存在该html，则可以重定向到\ management.html。

选择<a> tag in CSS stylesheet

3 个答案: