爲什麼「float」屬性更改HTML中按鈕的大小？

HTML代碼：爲什麼「float」屬性更改HTML中按鈕的大小？

<body background="images/bg1.jpg" > 
<header><h1>Sample</h1></header> 
<br/><br/><br/> 
<span class="button" > 
    <a href="in.html" class="button" > 
     In &nbsp;&nbsp;&nbsp;<span class="icon"><img border="0" src="images/in.jpg"></span> 
    </a> 
</span> 
<br/><br/> 
<span class="button"> 
    <a href="out.html" class="button"> 
     Out <span class="icon"><img border="0" src="images/out.jpg"></span> 
    </a> 
</span> 


</body>

CSS

.button { 
float:left; 
height:auto; 
font-size:25px; 
width:06em; 
text-align:center; 
white-space:nowrap; 
} 

/*Button link styles*/ 
.button a:link, .button a:visited { 
-webkit-border-radius:10px; 
color:#291919; 
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f34f23), to(#cf0014)); 
font-weight:bold; 
text-decoration: none; 
-webkit-box-shadow:0px 1px 2px #999; 
text-shadow:2px 2px 0px #fe6c6c; 
border-bottom:1px solid #78000c; 
margin: 0.2em; 
padding:0.2em; 
}

現在，如果我改變浮動屬性「繼承」（頭的中央對齊），這兩個按鈕來中心，但它們的形狀不恆定。這是爲什麼？我怎樣才能使它保持不變？

在此先感謝。

來源

2012-11-27 shriguru nayak

因爲浮動意味着'display：block'。默認情況下，''是'display：inline'。 – DCoder

我的要求是使這兩個按鈕居中對齊而不改變按鈕大小（高度和寬度）。有人可以告訴我我該怎麼做。 –