メニューには次のhtmlがあります
<ul>
<li id="btnHome"><a href="#">Link One</a></li>
<li id="btnAbout"><a href="#">Link Two</a></li>
<li id="btnContact"><a href="#">Link Three</a></li>
<li id="btnLinks"><a href="#">Link Four</a></li>
</ul>
以下は私のcssです
ul {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
}
#nav {
background: #999;
padding: 2%;
}
#nav ul li {
float: left;
margin-right: 2%;
}
リンクを 1 行に表示するために、上記の IE6 および 7 を使用します。float: left
メニュー項目を一列に表示しますが、div のスタイルも変更し、#nav
メニュー項目は#nav
div 内に表示されなくなります。
IE6 および 7 でこの問題を解決するにはどうすればよいですか?
注:私はdisplay: inline-block
最新のブラウザを使用していますが、これは正常に機能します。