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

这是因为您在 the和所有snav上都有课程。复制 css并将其中一个更改为. 对于同一个，删除所有背景属性。ulliul.navul li.nav

（你正在做的是说“将此css应用于任何ul带有 classnav以及它的带有 class 的孩子nav。”）

于 2011-07-26T19:18:37.123 回答
0

正如我刚刚意识到的那样，这个问题的答案在于我将标签的高度设置为 1.35em ul。它一直坐在我面前，而我花了几个小时敲打键盘。只是表明当事情出现问题时你不能忽视小事。

于 2011-07-27T03:17:01.100 回答