Question

我在使用语言翻译插件的网站上有一个典型的CSS导航菜单。有些翻译的结尾比其他翻译更长，这导致一些问题，其中一些li项目是两行长，而兄弟姐妹仍然只有一行长。父母UL垂直伸展以容纳较长的物品，但由于较短的兄弟姐妹只有一条线长，所以它们的风格不是很正确。

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

正如你所看到的，双线是好的，但兄弟的单线需要占据父UL的高度，以便右边的白色边框一直向下，悬停状态也是如此一路走下去。

如何设置这些锂项目的样式，使其填充100％的父级UL高度？（因为将高度设置为100％只是将其设置为自身的100％）

您可以在http://cap.wizzywighost.com/?s=post&lang=fr

看到实时样本

会喜欢这个。谢谢！

Answer 1

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

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

一个{... border-right：1px solid #fff ...}

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

一个{...}

Answer 2

让我们看看the specs for height calculation：

百分比是根据高度来计算的生成的框包含块。如果含有的高度未明确指定块（即，它取决于内容高度），这个元素并不是绝对定位的值计算'自动'。

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

将该导航块作为表格渲染不会受上述影响。鉴于您可能也希望在菜单中垂直对齐导航项，在此处使用表格并不羞耻，特别是考虑到其最宽的支持范围，而不是使用display:table*;样式。

更新

我看到你对无法使用表格的评论。如果您乐意放弃垂直对齐，faux columns将是一个很容易实现的技巧。这样做是因为它增加了带填充的菜单项的渲染高度，但是偏移了带有负边距的任何布局空间：

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

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

Answer 3

我已经为你的导航做了两个解决方案首先我刚刚为你的班级 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，你会得到所需的结果我认为你正在看这个......

第二种方法

我使用padding而不使用 Width and 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;
}

我希望这对你有帮助我试着给你最近的问题解决方案....

CSS导航菜单 - 悬停状态为父UL高度的100％

3 个答案:

更新