Question

抱歉没有问题。我无法弄清楚如何创建一个链接按钮。我希望这两个span标签是内嵌的，但是要在另一个下面标记。

HTML

<span style="display: inline">
<span class="icon-cancel"></span>
<span>Cancel operation</span>
</span>

CSS

.icon-cancel {
    display: block;
    background: no-repeat scroll 0 0 transparent;
    height: 16px;
    width: 16px;
}
.icon-cancel {
    background-image: url("../img/ui/controls/cancel/cancel1.png");
}

Answer 1

您的内心<span>（.iconCancel）是display: block。

您应该将其设为inline-block，以便将其布局为内联元素，但将其视为块元素。

Answer 2

你需要你的朋友，内联块。内联块适用于IE 7及之前的所有内容。有一个黑客可以使它适用于它们，这是zoom和* display属性，如下所示。

为此，您将其应用于外部元素。内部造型看起来很不错。

<span class="inlineblock">  
<span class="icon-cancel"></span>  
<span>Cancel operation</span>
</span>

和

 <style>
 .inlineblock{
     background:#ccc;
     display: inline-block;
     zoom: 1;
     *display: inline;
 } 
 </style>

Answer 3

<span>
<div class="cancel icon-cancel"></div>
<div class="cancel">Cancel operation</div>
</span>

.cancel {
    background: no-repeat scroll 0 0 transparent;
    height: 16px;
    width:auto;
}
.icon-cancel {
    background-image: url("../img/ui/controls/cancel/cancel1.png");
    width: 16px;
}

CSS。来自<span>标记</span>的链接按钮

3 个答案: