为什么“float”属性会改变HTML中按钮的大小？_Html_Css

为什么“float”属性会改变HTML中按钮的大小？

html css

为什么“float”属性会改变HTML中按钮的大小？,html,css,Html,Css,HTML代码： <body background="images/bg1.jpg" > <header><h1>Sample</h1></header> <br/><br/><br/> <span class="button" > <a href="in.html" class="button" > In   &

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>

现在，如果我将float属性更改为inherit header是居中对齐的，则两个按钮都会居中，但它们的形状不是恒定的。为什么呢？我怎样才能使它保持不变

提前感谢。

您需要指定将按钮呈现为块元素的事实。正如DCoder所说，元素默认呈现为内联元素。您可以强制它进入块模式：

display: block;

请参见此

添加到您的.按钮中的清除：左侧

像这样

因为浮动意味着显示：块。默认情况下，是display:inline。我的要求是使这两个按钮居中对齐，而不更改按钮大小、高度和宽度。有人能告诉我怎么做吗。

display: block;

.button {
clear:left;
}