Question

我正在为侧边栏中的导航列表创建一个圆角框。我遇到的问题是我创建了一个超长的部分透明图像作为滑动门的底部，但无论我将它设置为哪个元素作为背景 - 它似乎不想扩展正确地覆盖整个列表，当用作标记的背景时，在第一个链接处开始和停止。我已经提供了以下代码：

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-->

Answer 1

这是因为nav和所有ul都有li课程。复制ul.nav的CSS并将其中一个更改为ul li.nav。对于同一个，删除所有背景属性。

（您正在做的是说“将此css应用于课程ul的所有nav以及课程nav的孩子。”）

Answer 2

正如我刚才意识到的那样，问题的答案在于我将1.35em的高度设置为ul标签。我一直坐在我面前，而我却花了几个小时抨击键盘。只是表明，当事情变得越来越多时，你不能忽视那些小东西。

如何调整大型垂直滑动门的<ul>元素的背景？</ul>

2 个答案: