我发现了这篇文章,并且决定喜欢他们对链接和按钮的样式设置。因此我使用了该文章中的CSS...
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
然后我有一排按钮,我想这样使用...
<div class="buttons">
<a href="/password/reset/"><img src="pict1.png" class="positive" alt=""/>Button 1</a>
<a href="/password/reset/"><img src="pict2.png" alt=""/>Button 2</a>
<a href="/password/reset/"><img src="pict3.png" class="negative" alt=""/>Button 3</a>
</div>
请看这个例子:http://reljac.com/csstest.php
但是那一排按钮可能需要居中对齐,而不是全部靠左或靠右。如果我改变CSS为...
.buttons a, .buttons button{
/*display:block;
float:left;*/
margin:0 7px 0 0;
当存在图片时,特别是在IE 6、7和8中,按钮的显示不再正确。
请参见此示例:http://reljac.com/csstest_wo.php
我可以将浮动更改为右对齐以使按钮右对齐,但我无法想出如何使它们居中对齐(就像在<td></td>
中一样)。
因此,简而言之,我希望仍然使用原始样式,但如果需要,也能够使按钮居中对齐。