将图像放入 BUTTON 元素（HTML 和 CSS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2616775/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Putting Images Inside a BUTTON Element (HTML & CSS)
提问by Jimbo
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)
我有一个简单的按钮（如下所示），我需要在上面显示两张图片，一个在按钮文本的两侧。我正在努力创建适用于 Firefox 和 Internet Explorer 的 CSS！（按钮图像来自 JQuery UI 皮肤文件）
CSS
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
HTML
<button><div class="leftImage"></div><span>Button Text</span><div class="rightImage"></div></button>
Preview
预览
Firefox
火狐
Internet Explorer 8
浏览器 8
回答by Jimbo
Here is how to do it
这是如何做到的
The Theory
理论
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:nowrapforces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.
块元素（如 DIV）虽然按创建顺序显示，但会将自己放置在与前一个元素相邻的位置，或者当空间不足时，将放在下一行。因为我们不想给按钮一个宽度（我们希望按钮根据按钮的内容自动调整大小），所以块元素继续出现在下一行（参见上面问题中的 IE8 图像）。使用white-space:nowrap强制内联元素（如 SPAN 和 EM）显示在同一行上，但被块元素忽略，因此解决方案如下。
CSS
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
HTML
<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>
The Result
结果
Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3
Internet Explorer 6、7、8 和 Firefox 1.5、2、3
回答by graphicdivine
I would use spans not divs for the image containers, since you seem to want the images to appear inline. Using floated divs is just too complex.
对于图像容器，我会使用跨度而不是 div，因为您似乎希望图像显示为内联。使用浮动 div 太复杂了。
In fact, you could probably simplify things further by applying one background image to the button itself, and one to the button-text span, and removing the other two containers altogether.
事实上，您可以通过将一张背景图像应用到按钮本身，将一张应用到按钮文本范围，并完全删除其他两个容器来进一步简化事情。
Another alternative is to simply add the images in as img tags.
另一种选择是简单地将图像添加为 img 标签。
回答by keithics
try resetting the button css.
尝试重置按钮css。
button{
border:none;
background:none;
padding:0;
margin:0;
}
And add a space inside an empty DIV see if it works.
并在空的 DIV 中添加一个空格，看看它是否有效。
<button><div class="leftPic"> </div><span>Button Text</span><div class="rightPic"> </div></button>
回答by Srikanth Muttavarapu
I think you can strip off the button tag and use a div tag instead.For other button action use javascript onlick() function and use css to change curser on hover(to make it look like button).For my project I used a similar approach.This may help you :)
我认为你可以去掉按钮标签并使用 div 标签代替。对于其他按钮操作，使用 javascript onlick() 函数并使用 css 在悬停时更改光标（使其看起来像按钮）。对于我的项目，我使用了类似的方法。这可能会帮助你:)
回答by kalaxt
I know this is already solved, but just wanted to add that an easy way to put more than 1 image in a button is creating 1 .png with the dimensions of the button you want to create and the to elements together in one file.
我知道这已经解决了，但只是想补充一点，在一个按钮中放置 1 个以上图像的简单方法是创建 1 个 .png，其中包含您要创建的按钮的尺寸和 to 元素一起在一个文件中。
