0

我目前有一个链接，我将它用作查看它的按钮，我想向它添加一个图标。

+示例：将显示添加用户的单词旁边的加号图标。这是我的链接：

<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'>Cancel</a>

这是我的.glossyBtn风格：

.glossyBtn
{
    display: inline-block;
    background-color: #c1e2f4;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: -moz-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: -ms-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: -o-linear-gradient(top, #eeeeee, #b1daf1);
    background-image: linear-gradient(top, #eeeeee, #b1daf1);
    border: 1px solid #3e95c8;
    border-bottom: 1px solid #3e95c8 !Important;
    border-radius: 3px;
    color: #046fad !Important;
    font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 5px 12px;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
}

现场演示：Tinkerbin

4

2 回答 2

1

我没有对此进行测试，但以下内容应该适用于正确的定位：

<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'><span><img src="plus.png" alt=""></span>Cancel</a>

<span>通过在文本前面加上一个包含 的前缀<img>，您可以确保图像与右侧的文本保持内联。

于 2012-08-15T20:16:09.560 回答
1

使用:after伪选择器：

.glossyBtn:after {
    content: '+'; 
    padding-left: 5px;
}

现场演示：Tinkerbin

如果要在文本前:before添加加号，请使用伪选择器：

.glossyBtn:before {
    content: '+'; 
    padding-right: 5px;
}

现场演示：Tinkerbin

我添加了向左/向右填充，以便在文本和加号字符之间留出一些空间。

于 2012-08-15T20:16:28.557 回答