把图片里面一个按钮元素（HTML＆安培; CSS） [英] Putting Images Inside a BUTTON Element (HTML & CSS)

问题描述

我有一个简单的按钮（如下图所示）上，我需要显示两个画面，一个在按钮上的文字的两边。林争夺创建​​将在Firefox和Internet Explorer的工作CSS！ （按钮图像是从一个jQuery UI的皮肤文件来）

I have a simple button (as shown below) on which I need to display two pictures, one on either side of the button text. Im battling to create the CSS that will work in both Firefox and Internet Explorer! (the button images are coming from a JQuery UI skin file)

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>

preVIEW

火狐

Internet Explorer 8中

Internet Explorer 8

推荐答案

下面是如何做到这一点。

Here is how to do it

论

块元素（如DIV）虽然显示在创建顺序，将自己定位毗邻previous元素或短的空当，在下一行。因为我们不想要给该按钮的宽度（我们希望按钮被自动调整大小的基础上，按钮的内容）元素继续出现在下一行块（参见IE8图像中的问题以上）。使用空格：NOWRAP 力量在同一行中显示内联元素（如SPAN和EM），但由块元素忽略，因此下面的解决方案

Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.

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

Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3

这篇关于把图片里面一个按钮元素（HTML＆安培; CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！