1

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

现在，如果我将浮动属性更改为“继承”（标题居中对齐），两个按钮都会居中，但它们的形状不是恒定的。这是为什么？我怎样才能让它保持不变？

提前致谢。

4

2 回答 2

0

clear : left在你的添加到这个.button

像这样

.button {
clear:left;
}

现场演示

于 2012-11-27T08:45:46.513 回答
0

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

display: block;

看到这个小提琴

于 2012-11-27T08:40:52.710 回答