显示下的奇怪空白:块元素

时间:2016-03-11 20:25:03

标签: html css

有一些奇怪的空白一直出现在我的所有显示器下:块元素。这是一个meganavigation。我不知道造成这种情况的原因。基本上,我有下面的代码(加上一些更确定列宽的代码),当它生成meganav时,呈现为“display:block”的项目在它们下方有一个空格。当您将鼠标悬停在主导航中的项目上时也可以看到它。我不太清楚该怎么做。

natural

HTML:

a {
font-family: "Frutiger LT Std 45 Light", sans-serif;
color: black;
text-decoration: none;
font-size: 10px;
display: block;
padding: 3px;

}

a:hover {

text-decoration: none;
color: white;
background-color: #c8a51b;

}

.nav {

background: #1b2c69;
width: 800px;
margin: 10px;
height: 30px;

}

.nav li {

list-style: none;

}

.nav > li {

padding: 0;
float: left;
position: relative;

}

.nav > li > a {

font-family: "Frutiger LT Std 45 Light", sans-serif;
float: left;
color: #fff;
font-size: 13px;
text-decoration: none;
line-height: 30px;
padding: 0 20px;
height: 43px;
text-transform: uppercase;

}

.nav > li:hover > a {
background: #FFF;
color: #1b2c69;

}

2 个答案:

答案 0 :(得分:0)

请参阅this link

我已将bgcolor添加到背景中以查看空白区域。

修复方法是:

import util

在上面的CSS中,我将.nav > li > a { font-family: "Frutiger LT Std 45 Light", sans-serif; float: left; color: #fff; font-size: 13px; text-decoration: none; line-height: 30px; padding: 0 20px; height: 30px; text-transform: uppercase; } 更改为height: 43px;

因为所有li标签的高度在旅行箱中应该相同,以达到您想要的效果。希望你明白。

答案 1 :(得分:-1)

很多原因可能是造成这个空白的原因。

  

帮自己一个忙,右键点击空格,然后点击“检查元素”,然后从那里检查右侧(css代码),导致该空格出现的原因是什么。它可能是一些边距或填充问题。

始终更喜欢使用元素检查。