Question

任何人都可以在我继承的网站上给我一个指针。我更像是一个搜索引擎优化的人，而不是原始代码，我在这方面没有取得任何进展。

查看http://www.edwardjackson.co.uk，您会看到左侧导航列表“Home Condition reports”中最后一项周围的空白。

任何人都可以给我一个关于导致这个＆amp;怎么办呢？

我认为css的相关部分是：

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    text-decoration: underline;

非常感谢 - Dunc。

Answer 1

您为锚元素定义了固定的height 尝试使用：

.nav li ul li a { height:auto; }

Answer 2

您所看到的实际上是正确的空白量。问题是另一个元素有两行文本，因此内容“溢出”。

原因是.nav li ul li a元素的高度为18px，仅略高于单行文本。如果将该样式更改为height: auto;，则整个列表将保持一致。（注意：该样式位于style.css样式表的第699行）。

Answer 3

您需要从两个类中删除'height'属性：

.nav li ul li a
.nav li a

Answer 4

在你的班级导航中你使用了18px的height属性;如果你改变它，它看起来应该是。

代码应如下所示：

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: auto;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    text-decoration: underline;

旁注：你可以从.nav li ul li中删除很多属性：hover所以你的css看起来很干净。这是因为悬停的所有属性都将继承自.nav li ul li a

您所要做的就是更改不同的属性所以你的代码看起来像这样：

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    text-decoration: underline;
}

offcourse这不是必须的，但可以使你的css代码更清晰，更快地加载。

导航列表中最后一项的空白/边距

4 个答案: