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>

预览

火狐

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

Internet Explorer 8

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

Answer 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

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

Answer 2

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

事实上，您可以通过将一个背景图像应用于按钮本身，将一个背景图像应用于按钮文本范围，并完全删除其他两个容器，来进一步简化操作。

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

Answer 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>

Answer 4

我认为你可以剥掉按钮标签并使用div标签。对于其他按钮动作，使用javascript onlick（）函数并使用css在悬停时更改光标（使其看起来像按钮）。对于我的项目我使用了类似的方法。这可以帮助你：）

Answer 5

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

将图像放在BUTTON元素内（HTML和CSS）

5 个答案: