0

私はメニュー構造を持っています：

<ul id="footer-nav">
    <li id="button1"><a href="#page-1">a</a></li>
    <li id="button2"><a href="#page-2">a</a></li>
    <li id="button3"><a href="#page-3">a</a></li>
    <li id="button4"><a href="#page-4">a</a></li>
    <li id="button5"><a href="#page-5">a</a></li>
    <li id="button6"><a href="#page-6">a</a></li>
    <li id="button7"><a href="#page-7">a</a></li>
    <li id="button8"><a href="#page-8">a</a></li>
</div>

CSS：

ul#footer-nav {background:url(images/footer-nav_bg.png) no-repeat;height:52px;position:relative;left:50%;bottom:22px;width:272px;}
ul#footer-nav li {background: url(images/footer-nav-li_bg.png) no-repeat;height: 20px;width: 20px;top: 45%;float: left;position: relative;margin-right: 10px;left: 8%;}

メニュー項目をクリックすると、ページに移動します。大丈夫です。しかし、メニュー項目にテキストがないのでa、構造上のテキストを削除すると、メニュー項目をクリックできなくなります。どうすれば解決できますか？

4

3 に答える 3

3

これはa、空の場合はスペースを占有しないため、クリックできないためです。

これを解決するには、次の CSS を追加します。

ul#footer-nav li a {
    display: inline-block; /* important for the width and height to take effect */
    width: 60px; /* or whatever */
    height: 20px; /* or whatever */
}
于 2013-01-31T15:45:19.367 に答える
0

これを試して

#footer-nav li a {
    display: inline-block;
    width: 50px; 
    height: 20px;
}
于 2013-01-31T15:49:12.877 に答える
0

テキストを削除すると、高さがなくなります。css を変更して、アンカー タグの幅と高さを含めると、正常に動作するはずです。

于 2013-01-31T15:46:44.173 に答える