html - 将图像放入 BUTTON 元素内(HTML 和 CSS)

Question

我有一个简单的按钮(如下所示)，我需要在其上显示两张图片，一张在按钮文本的两侧。我正在努力创建适用于 Firefox 和 Internet Explorer 的 CSS! (按钮图像来自 JQuery UI 皮肤文件)

CSS

button div{
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_d19405_256x240.png);      
}

button div.leftImage{
    background-position: -96px -112px;
    float: left;
}

button div.rightImage{
    background-position: -64px -16px;
    float: right;
}

HTML

<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>

预览

火狐

互联网浏览器 8

Answer 1

具体做法如下

理论

block 元素(如 DIV)虽然按创建顺序显示，但它们会将自己定位在与前一个元素相邻的位置，或者在空间不足时，在下一行。因为我们不想给按钮一个宽度(我们希望按钮根据按钮的内容自动调整大小)， block 元素继续出现在下一行(参见上面问题中的 IE8 图像)。使用 white-space:nowrap 强制内联元素(如 SPAN 和 EM)显示在同一行上，但会被 block 元素忽略，因此有以下解决方案。

CSS

button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    height:28px;
}

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_3d3d3d_256x240.png);      
}

button em.leftImage{
    background-position: -96px -112px;
}

button em.rightImage{
    background-position: -64px -16px;
}

HTML

<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>

结果

Internet Explorer 6、7、8 和 Firefox 1.5、2、3