1

我在一个使用语言翻译插件的网站上有一个典型的 CSS 导航菜单。一些翻译最终比其他翻译更长，这导致一些 li 项目长两行，而兄弟 li 仍然只有一行长的问题。父 UL 垂直拉伸以容纳较长的项目，但由于较短的同级 li 仅一行长，因此它们的样式不太正确。

这很难用语言来解释。看截图： css截图http://dl.dropbox.com/u/6448156/CAP-hover.png

可以看到，二线没问题，但是兄弟一线需要承担父级UL的高度，这样右边的白色边框一直向下，hover状态也一直向下一路下来。

如何设置这些 li 项目的样式，以便它们填充父 UL 高度的 100%？（因为将高度设置为 100% 只是将其设置为自身的 100%）

您可以在http://cap.wizzywighost.com/?s=post&lang=fr看到一个现场样本

会喜欢这个。谢谢！

4

3 回答 3

1

最简单的解决方案应该是将border-right: 1px solid #fff 设置为li 而不是子a 的属性。

现在你的代码应该是这样的：

a{...border-right: 1px solid #fff ...}

你希望它看起来像这样： li{...border-right: 1px solid #fff ...}

一个{...}

于 2012-07-08T13:03:54.940 回答
0

让我们看看高度计算的规格：

该百分比是相对于生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为'auto'。

鉴于您没有在父项上设置显式值<ul>（因为......好吧，您不能 - 您事先不知道最高框的高度），它会忽略height:100%;菜单项。

将该导航块呈现为表格不会受上述影响。考虑到您可能也希望在菜单中垂直对齐导航项，在这里使用表格并不丢人，尤其是考虑到它的支持范围最广，而不是使用display:table*;样式。

更新：

我看到了您关于无法使用表格的评论。如果您乐于放弃垂直对齐，那么人造列将是一个容易实现的技巧。它的作用是增加了带有填充的菜单项的渲染高度，但抵消了以负边距占用的任何布局空间：

.menu-item, .menu-item a {
    padding-bottom:999px !important;margin-bottom:-999px !important;
}

!important只要将这些属性添加到正确的规则中，您实际上就不必使用fiddled。IMO 这是您可以使用的最简单的与高度无关的修复。

于 2012-05-30T02:29:17.313 回答
0

我已经为你的导航做了两个解决方案第一个是我刚刚定义了min-height:50px:到你的类div.nav ul li a

正如下面提到的更新的CSS

div.nav ul li a {
    border-right: 1px solid white;
    color: white;
    display: block;
    min-height: 50px;
    padding: 5px 10px 3px;
    text-decoration: none;
    width: 167px;
}

一旦你用这个类更新你的css，你会得到想要的结果，我认为你正在寻找这个.....

第二种方法

我在不使用Width 和 Height的情况下玩过填充，因此您也可以看到替代方法...检查第二种方法CSS

div.nav {
    background: none repeat scroll 0 0 #89BFE4;
    clear: both;
    color: #FFFFFF;
    font-size: 18px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 199;
}
div.nav ul {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}
div.nav ul li:hover {
    background: none repeat scroll 0 0 #FF9900;
}
div.nav ul li {
    border-right: 1px solid white;
    float: left;
    padding: 10px;
}
div.nav ul li a {
    color: white;
    display: block;
    text-decoration: none;
}
div.nav ul li:last-child a {
    border-right: medium none;
}
div.nav ul li a:hover, div.nav ul li:hover > a {
    color: white;
}
.current-menu-item {
    background: none repeat scroll 0 0 #FF9900;
}
div.nav ul ul {
    background: none repeat scroll 0 0 #FF9900;
    display: none;
    left: 93px;
    position: absolute;
    top: 42px;
    width: 250px;
    z-index: 200;
}
div.nav ul ul li {
    clear: left;
    position: relative;
    text-align: left;
}
div.nav ul ul li:hover, div.nav ul ul li:hover a {
    color: #FF9900;
    background: none repeat scroll 0 0 white;
}
div.nav ul ul li a, div.nav ul li.active li a {
    color: white;
    width: 250px;
}
div.nav ul ul li a:hover, div.nav ul li.active ul li a:hover, div.nav ul li:hover ul li a:hover, div.nav ul li.hover ul li a:hover {
}
div.nav ul > li:hover > ul, div.nav ul > li.hover > ul {
    display: block;
}

我希望这对您也有帮助，我试图为您提供最接近您问题的解决方案....

于 2012-05-30T06:25:41.583 回答