<ul>导航栏未正确显示</ul>

时间:2014-09-04 00:13:18

标签: html css html5 css3 navbar

我使用<ul>创建了导航栏。问题是<ul>并未包含正确的项目,但它仍会影响其位置。突出显示后,您可以看到<ul>位于<li>上方。

附加:   <ul>的宽度似乎并没有自动设置为<li>的集体宽度,而且很难注意到,但是即使<li>属性设置为box-shadow,最后一次悬停none也会隐藏阴影。

这是JSFiddle

以下是代码:

HTML:

<div id="nav">
    <ul class="nav">
        <li class="nav"><a class="nav" href="Index.html">Home</a>

        </li>
        <li class="nav"><a class="nav" href="">About</a>

        </li>
        <li class="nav"><a class="nav" href="">Contact</a>

        </li>
    </ul>
</div>

CSS:

#nav {
    background-color: rgba(246, 246, 246, 0.75);
    padding: 10px;
    margin: 10px;
}
ul.nav {
    height: 100%;
    /* Is there a way to make the width automatically size itself relative to the collective width of the menu items? */
    width: 330px;
    /* Without defining <width> the <ul> defaults to 100%. */
    display: block;
    margin: 10px auto;
    padding: 0;
    /* --------------------------- The border highlights the problem. --------------------------- */
    border: 1px solid Red;
    /* The <ul> should surround the <li>'s. This is making the menu options display out-of-place. */
}
li.nav {
    margin: 0 0 10px 0;
    display: inline;
    padding: 0 0 10px 0;
}
a.nav {
    height: 100%;
    color: #665544;
    display: block;
    width: 100px;
    float: left;
    padding: 5px;
    margin: 0;
}
/* --------------- Animations --------------- */
 a.nav {
    animation: navUnfocus 0.3s ease-in forwards;
    -webkit-animation: navUnfocus 0.3s ease-in forwards;
    -moz-animation: navUnfocus 0.3s ease-in forwards;
}
a.nav:hover, a.nav:focus {
    animation: navFocus 0.3s ease-out forwards;
    -webkit-animation: navFocus 0.3s ease-out forwards;
    -moz-animation: navFocus 0.3s ease-out forwards;
}
@keyframes navFocus {
    from {
    }
    to {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
}
@keyframes navUnfocus {
    from {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
    to {
        background-color: rgba(246, 246, 246, 0);
        /* --------- This is the problem where there is a small trace of a shadow --------- */
        box-shadow: none;
    }
}

3 个答案:

答案 0 :(得分:1)

添加overflow: hidden;并从height seems to fix this删除ul.nav设置。我认为在this answer中可以更好地解释其原因。

要保留阴影,只需从float: left display: block移除a.navdisplay: block,就像this jsfiddle一样,我可以告诉他 - 但也许我打破了这样做的其他事情。无论如何,我非常确定{{1}}对于将它们保持在你想要的行中没有多大意义。

答案 1 :(得分:1)

步骤1:如果您要在此处浮动任何内容,请浮动li而不是a

步骤2:如果您是浮动元素,请注意它们已从正常文档流中删除。因此,父母将自己崩溃。最常见的解决方案是clearfix。将其应用于ul,例如ul class="nav cf":以下缩写版本:

.cf:before, .cf:after {
    content: " "; 
    display: table; 
}

.cf:after {
    clear: both;
}


.cf {
    *zoom: 1;
}

Clearfix Demo

第3步:也许使用display:inline-block; 代替。进行以下更改:

ul.nav {
    height: 100%;
    /* Is there a way to make the width automatically size itself relative to the collective width of the menu items? */
    /*width: 330px;*/
    /* Without defining <width> the <ul> defaults to 100%. */
    display: inline-block;
    margin: 10px auto;
    padding: 0;       
    border: 1px solid Red;

}

li.nav {
    margin: 0 0 10px 0;
    display: inline-block;
    padding: 0 0 10px 0;
}
a.nav {
    height: 100%;
    color: #665544;
    display: block;
    width: 100px;
    padding: 5px;
    margin: 0;
}

Demo

以下是关于Pros and Cons of inline-block

的文章

答案 2 :(得分:1)

这是我自己的版本,使用您的代码进行一些小修改

http://jsfiddle.net/ctr4uqec/10/

HTML

<div id="page">
    <div id="nav">
        <ul class="nav">
            <li class="nav"><a class="nav" href="Index.html">Home</a>

            </li>
            <li class="nav"><a class="nav" href="">About</a>

            </li>
            <li class="nav"><a class="nav" href="">Contact</a>

            </li>
        </ul>
    </div>
</div>

CSS

body {
    background-color: #ddd;
}
#page {
    font-family: Arial, Verdana, sans-serif;
    color: #0d5c27;
    text-align: center;
    width: 960px;
    margin: 0 auto;
}
#nav {
    background-color: rgba(246, 246, 246, 0.75);
    padding: 10px;
    margin: 10px;
}
ul.nav {
    height: 100%;
    /* Is there a way to make the width automatically size itself relative to the collective width of the menu items? */
    width: 330px;
    /* Without defining <width> the <ul> defaults to 100%. */
    display: block;
    margin: 10px auto;
    padding: 0;
    /* --------------------------- The border highlights the problem. --------------------------- */
    outline: 1px solid Red;
    /* The <ul> should surround the <li>'s. This is making the menu options display out-of-place. */
}
li.nav {
    margin: 0 -2px;
    display: inline-block;
    padding: 0 0 0px 0;
}
a.nav {
    color: #665544;
    display: inline-block;
    padding: 0px 10px;
    line-height: 35px;
    margin: 0;
}
/* --------------- Animations --------------- */
 a.nav {
    animation: navUnfocus 0.3s ease-in forwards;
    -webkit-animation: navUnfocus 0.3s ease-in forwards;
    -moz-animation: navUnfocus 0.3s ease-in forwards;
}
a.nav:hover, a.nav:focus {
    animation: navFocus 0.3s ease-out forwards;
    -webkit-animation: navFocus 0.3s ease-out forwards;
    -moz-animation: navFocus 0.3s ease-out forwards;
}
@keyframes navFocus {
    from {
    }
    to {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
}
@-webkit-keyframes navFocus {
    from {
    }
    to {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
}
@-moz-keyframes navFocus {
    from {
    }
    to {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
}
@keyframes navUnfocus {
    from {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
    to {
        background-color: rgba(246, 246, 246, 0);
        /* --------- This is the problem where there is a small trace of a shadow --------- */
        box-shadow: none;
    }
}
@-webkit-keyframes navUnfocus {
    from {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
    to {
        background-color: rgba(246, 246, 246, 0);
        box-shadow: none;
    }
}
@-moz-keyframes navUnfocus {
    from {
        background-color: rgba(246, 246, 246, 0.5);
        box-shadow: 0 0 5px #665544;
    }
    to {
        background-color: rgba(246, 246, 246, 0);
        box-shadow: none;
    }
}