Question

HTML code：

<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;
 }

现在，如果我将float属性更改为“inherit”（标题是居中对齐），则两个按钮都会居中，但它们的形状不是常量。这是为什么？我怎样才能使它保持不变？

提前致谢。

Answer 1

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

display: block;

请参阅此Fiddle

Answer 2

在clear : left

中添加 .button

就像这样

.button {
clear:left;
}

的 Live Demo 的

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

2 个答案: