将图像放在BUTTON元素(HTML和CSS)

发布时间：2020-12-14 19:30:20 所属栏目：资源来源：网络整理

导读：我有一个简单的按钮(如下所示),我需要显示两个图片,一个在按钮文本的两边.我打算创建可以在Firefox和Internet Explorer中工作的CSS！ (按钮图像来自 JQuery UI皮肤文件) CSS button div{ width:16px; height:16px; background-image: url(images/ui-icons_d1

我有一个简单的按钮(如下所示),我需要显示两个图片,一个在按钮文本的两边.我打算创建可以在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>

预习

火狐

alt text http://i44.tinypic.com/auh7v7.jpg

Internet Explorer 8

alt text http://i39.tinypic.com/16234g1.jpg

解决方法

这是怎么做到的

理论

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

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

alt text http://i40.tinypic.com/14d0l86.jpg

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!