0

サイドバーのナビゲーションリスト用に丸みを帯びたボックスを作成しています。私が抱えている問題は、引き戸の下部として機能する非常に長い部分的に透明な画像を作成したことですが、どの要素を背景として設定しても、拡張したくないようですタグの背景として使用される場合は、リスト全体で適切に開始および停止します。以下のコードを提供しました：

CSS：

#sidebar{float:left;
        width: 200px;
        text-align: center;
        margin: 0 0 0 0;
        }

    .nav {
    } /*Attempting to display it here leads to evil. As you might expect from the code below*/



    ul.nav {font-family: arial, san serif;

        margin-left:auto;

        margin-right: auto;

        margin-top:0;

        margin-bottom: 0;

        text-align: left ;  

        width: 200px;

        padding: 0;

        height: 1.35em;

        list-style: none;

                background-image:url(headbutt2.png); /*Here, it only exists as background for the first link*/
            background-repeat:none;
        background-position:top;


        }

    #navwid{background-image:url(head2.png); /*This is the extra long image. Here, it does not display at all*/

background-repeat:none;
        background-position:bottom;}



ul.nav li {

    overflow: hidden;

    }



ul.nav a {

    text-align: center;

    font-weight: bold;

    font-size: 1em;

    padding: 0 1em 0 1em;

    height: 1.35em;

    text-decoration: none;

    color: black;

    }

.sidetop {margin:0 auto 0 auto;
    background-image:url(head3.png); /*Caption background. Displays fine with no issues.*/
    background-repeat: no-repeat;
    display:block;
    width:200px;}

HTML：

 <div id=sidebar>
    <div class="navwid">
 <!--Nav widget container-->
        <div class="sidetop">
 <!--Caption-->
        </div>      
        <div class="nav">


            <ul class="nav">

            <li><a href="#" class="nav">Dummylink</a></li>
            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li>

            <li><a href="#" class="nav">Dummylink</a></li> 
            <li><a href="#" class="nav">Dummylink</a></li></ul>

        </div> <!--nav end-->


    </div><!--navwid end-->
</div> <!--sidebar end-->
4

2 に答える 2

1

これは、と すべてののnav両方にクラスがあるためです。の css を複製し、そのうちの 1 つを に変更します。同じものについては、すべての背景属性を削除します。ulliul.navul li.nav

(あなたがしているのは、「この css を class を持つすべての子と class を持つすべての子に適用する」ということulですnav。nav)

于 2011-07-26T19:18:37.123 に答える
0

ul質問に対する答えは、私が気付いたように、タグに 1.35em の高さを設定することにあります。キーボードを叩いて数時間過ごしている間、ずっと目の前に座っていました。物事がバグになったときに小さなことを見逃すことはできないことを示しています。

于 2011-07-27T03:17:01.100 に答える