我使用<ul>创建了一个导航栏。问题是<ul>没有正确地包含项目，但它仍然影响它们的位置。高亮显示时，您可以看到<ul>位于<li>的上方。
额外：
<ul>的宽度似乎不会自动设置为<li>的集体宽度，这很难注意到，但即使box-shadow属性设置为none，最后一个悬停在<li>上的宽度也会保持微弱的阴影
这是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;
}
}
步骤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演示
步骤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;
}
演示
这是一篇关于内联块的优点和缺点的文章
添加overflow: hidden;并从ul.nav中删除height设置似乎可以解决此问题。我认为这个答案可以更好地解释原因。
为了保留您的阴影，只需像本jsfiddle中那样从a.nav中删除float: left和display: block就可以了–但也许我这样做会破坏其他东西。不管是什么情况，我敢肯定display: block上的内容并不能像你想的那样让它们排成一排。
这是我自己的版本，使用您的代码进行一些小的修改
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;
}
}