我使用<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;
}
}
答案 0 :(得分:1)
添加overflow: hidden;
并从height
seems to fix this删除ul.nav
设置。我认为在this answer中可以更好地解释其原因。
要保留阴影,只需从float: left
display: block
移除a.nav
和display: 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;
}
第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;
}
的文章
答案 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;
}
}