将图像放入 BUTTON 元素（HTML 和 CSS）答案

【问题标题】：Putting Images Inside a BUTTON Element (HTML & CSS)将图像放入 BUTTON 元素（HTML 和 CSS）
【发布时间】：2010-04-11 10:58:16
【问题描述】：

我有一个简单的按钮（如下所示），我需要在该按钮上显示两张图片，一张在按钮文本的两侧。我正在努力创建适用于 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>

预览

火狐

Internet Explorer 8

【问题讨论】：

您在 html 中的类与 CSS 不同...
稍微描述一下实际问题......浏览器之间会发生什么不同？
我只是说这个例子没有意义。您在 CSS 中创建了“leftimage”和“rightimage”类，但在 html 中使用了“leftpic”和“rightpic”。
@Bruce：抱歉，div 类名已更正
@Gaby：请查看我发布的图片中的问题（和差异）。我希望我不是第一个尝试这个的人，有人可以发布他们成功的代码！

标签： html css jquery-ui button

【解决方案1】：

这里是怎么做的

理论

块元素（如 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

【讨论】：

这应该被更新，以免错误地使用<em>元素。

【解决方案2】：

我会为图像容器使用跨度而不是 div，因为您似乎希望图像内联显示。使用浮动 div 太复杂了。

事实上，您可以通过将一张背景图像应用于按钮本身，将一张背景图像应用于按钮文本跨度，并完全移除其他两个容器，从而进一步简化事情。

另一种选择是简单地将图像添加为 img 标签。

【讨论】：

我尝试对图像使用 SPAN 元素，但是（聪明地）Firefox 突然隐藏了它们！很奇怪 - 我喜欢讨厌 CSS :'(
您需要为它们提供一些内容（如）和/或指定绝对宽度/高度以保持它们打开。空元素折叠。
SPAN 元素的宽度和高度为 16px（与使用的 DIV 相同）并带有仍然没有在 Firefox 中显示。我最终使用了 EM 元素（见下文）。 IMG 标签无法使用这些按钮所需的 JQuery 皮肤图像文件，所以我什至没有尝试使用它们，尽管我确信它们会起作用。

【解决方案3】：

尝试重置按钮 css。

button{
border:none;
background:none;
padding:0;
margin:0;
}

并在一个空的 DIV 中添加一个空格，看看它是否有效。

<button><div class="leftPic">&nbsp;</div><span>Button Text</span><div class="rightPic">&nbsp;</div></button>

【讨论】：

【解决方案4】：

我认为您可以去掉按钮标签并改用 div 标签。对于其他按钮操作，请使用 javascript onlick() 函数并使用 css 更改悬停时的光标（使其看起来像按钮）。对于我的项目，我使用了类似的方法。这可能会对您有所帮助:)

【讨论】：

【解决方案5】：

我知道这已经解决了，但只是想补充一点，在一个按钮中放置多个图像的一种简单方法是创建 1 个 .png，其中包含您要创建的按钮的尺寸和 to 元素合二为一文件。

【讨论】：