1

私のhtmlはとてもシンプルです： 

<div class="navigation">
    <li><a id="button" href="#" <img src=""></a></li>
    <li><a id="button2"  href="#" <img src=""></a></li>
    <li><a id="button3"  href="#" <img src=""></a></li>
</div>

そして私のCSSは： 

.navigation {
margin-top:35px;
margin-left: -290px;
list-style-type: none;
}

.navigation li{
display: inline;
}

#button, #button2, #button3 {

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
padding: 30px;
float: left;
margin-left: 390px;
}

#button{
 background-image: url("../images/homebutton.png");
}
#button2 {
background-image: url("../images/gmailbutton.png");
background-repeat: no repeat;
}
#button3 {
background-image: url("../images/blogbutton.png");
}

これで、ブラウザウィンドウが開いているときは問題なく表示されますが、ウィンドウを閉じると、ウィンドウがロールオーバーしたときに画像が消えるのではなく、垂直方向にスタックし始めます。何か案は？？？ありがとう ：）

4

1 に答える 1

0

.navigation要素をulor （有効性が重要）に変更すると仮定すると、次のolように追加できます。折り返すwhite-space: nowrap;のではなく、要素をすべて1行に表示するように強制します（inline要素は当然のことながらそうする必要があります）。

.navigation {
    margin-top:35px;
    margin-left: -290px;
    list-style-type: none;
    white-space: nowrap;
}

JSFiddleの概念実証。

aそして、修正されたimgタグに注意してください。

于 2012-07-23T22:02:05.797 に答える