html - <ul> 导航栏显示不正确

Question

我使用 <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;
    }
}

Answer 1

第 1 步:如果您要在此处 float 任何内容，请 float li 而不是 a。

第 2 步:如果您是 float 元素，请注意它们已从正常文档流中移除。因此， parent 会自行崩溃。最常见的解决方案是 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 的文章