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

ここで、float属性を「inherit」（ヘッダーが中央揃え）に変更すると、両方のボタンが中央に配置されますが、それらの形状は一定ではありません。何故ですか？どうすればそれを一定にすることができますか？

前もって感謝します。

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 に答える