我只想将背景颜色应用到我的 anchor 标记而不是字体图标。我嵌套了 因为我需要图标也可以点击。
如果我采用 span fa-fa-angle-down 类并将其放在 anchor 之外,一切看起来都不错(这就是我想要的),但它不可点击。
<span class='http_method'>
<a href='test' class="toggleOperation"> <span class="fa fa-angle-down"></span> method</a>
</span>
span {
margin: 0;
margin-left: 10px;
padding: 0;
}
.http_method a{ background: linear-gradient(#4c99d7,#1a66a3);
border: 1px solid #1a66a3;
height: 25px;
line-height: 10px;
vertical-align: middle;
}
.http_method span{
font-size: 30px;
margin-right: 10px;
padding-left: 10px;
vertical-align: middle;
color: #686b6d;
}
最佳答案
为什么不只为你想要的渐变添加一个跨度,然后你就可以将两者都放在 anchor 内?
span {
margin: 0;
margin-left: 10px;
padding: 0;
}
.http_method a {
height: 25px;
line-height: 10px;
vertical-align: middle;
}
.http_method a span.gradient{
background: linear-gradient(#4c99d7, #1a66a3);
border: 1px solid #1a66a3;
}
.http_method span {
font-size: 30px;
margin-right: 10px;
padding-left: 10px;
vertical-align: middle;
color: #686b6d;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span class='http_method'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<span class='http_method'>
<a href='test' class="toggleOperation">
<span class="fa fa-angle-down"></span><span class="gradient">method</span>
</a>
</span>
</span>
关于html - 简单的 css 仅在 anchor 上应用背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39130665/