Question

https://jsfiddle.net/dy1a2tkh/1/

header_buttons {
color: #fff;
background: #00cc66;
border-radius: 8px;
margin: 5px;
padding: 6px 6px 6px 10px;
font-size: 30px;
font-family: 'Lobster', cursive;
text-decoration: none;
display: inline-block;

}

.hb-4,
.hb-5,
a.hb-5{
background: #00cc66;
float: right;
text-decoration: none;
}

我正在尝试将“我的个人资料”链接看作与其旁边的“注销”链接完全相同。

他们都使用相同的类，所以我猜他们看起来不同的原因是一个是链接而另一个是按钮。我需要做些什么来使它们相同？

Answer 1

例如，大多数浏览器都会向<input>和<a>元素添加样式。您必须删除它们/为特定元素设置自定义样式。

小提琴和代码段：https://jsfiddle.net/dy1a2tkh/2/

＆＃13;

.header_buttons {
  background: #00cc66;
  border-radius: 8px;
  margin: 5px;
  padding: 6px 6px 6px 10px;
  font-size: 30px;
  font-family: 'Lobster', cursive;
  display: inline-block;
}

.header_buttons, .header_buttons > a {
  text-decoration: none;
  color: #fff;
}

.hb-4,
.hb-5,
a.hb-5{
  background: #00cc66;
  float: right;
  text-decoration: none;
}

input {
  border: none;
}

＆＃13;

<input type="submit" name="logout" class="hb-4 header_buttons" value="Log Out" />
<div class="hb-5 header_buttons"><a href="test">My Profile</a></div>

＆＃13;

Answer 2

继续添加这个：

.header_buttons a {
  color: #fff;
  text-decoration: none;
}

Answer 3

你正在做a.hb-5，因为它是父母的hb-5。因此，样式不起作用。所以，你可以使用

.hb-5 a{ background: #00cc66; float: right; text-decoration: none; }

使按钮看起来与链接相同

3 个答案: