我正在进行水平导航,其中列表项需要跨越整个宽度和“活动”列表项需要比其他项更高。
通过将ul设置为display:table以及要显示的列表项,成功地使列表项跨越整个宽度:table-cell。
#l-primary-nav ul {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: table;
}
#l-primary-nav li {
display: table-cell;
text-align: center;
line-height: 40px;
}
我无法弄清楚如何使'active'列表项比其他项更高一些。我想我会设置一个margin-top:5px到#l-primary-nav li(上面)并从活动li(下面)中移除margin-top,但是table-cell项不接受边距。
#l-primary-nav li.active {
background: #fff;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
}
到目前为止,这是指向导航栏的链接:FIDDLE
我希望“关于”导航项比其余项高约5个像素。希望使用仅CSS解决方案。任何见解将不胜感激。
谢谢!
答案 0 :(得分:2)
请参考以下小提琴手: Here
HTML 的
<div id="l-primary-nav">
<ul class="l-inline">
<li><a href="#">Home</a>
</li>
<li class="active"><a href="#">About</a>
</li>
<li><a href="#">Articles</a>
</li>
<li><a href="#">Calendar</a>
</li>
</ul>
CSS
l-primary-nav {
width: 600px;
margin: 0 auto;
}
.l-inline li {
display: inline-block;
}
l-primary-nav ul {
width: 99.8%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display: table;
}
l-primary-nav li {
text-align: center;
display: table-cell;
float: left;
}
l-primary-nav li a{
line-height: 40px;
height: 41px;
padding: 0 30px;
border-top: 1px transparent;
display: block;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #FBFBFB), color-stop(1, #D1D1D1));
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: linear-gradient(to bottom, #FBFBFB 0%, #D1D1D1 100%);
}
l-primary-nav li a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E1E3E6), color-stop(1, #BABCBF));
background-image: -o-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -moz-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -webkit-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -ms-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: linear-gradient(to bottom, #E1E3E6 0%, #BABCBF 100%);
}
l-primary-nav li.active a{
margin-top: -5px;
height: 45px;
position: relative;
background: #fff;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-top: 1px solid #c2c2c2;
}
答案 1 :(得分:2)
这可能对您有所帮助
#l-primary-nav li {
display:block;
width:140px;
float:left;
text-align: center;
margin-top:4px;
border: 1px solid #c2c2c2;
}
我给出了display:block for li element并添加了width:
答案 2 :(得分:0)
使用上面提出的解决方案,我能够保持列表项跨越整个宽度,同时为活动列表项提供更高的高度。链接到代码:http://jsfiddle.net/melcsweeney/xc5Y2/
#l-primary-nav {
width: 600px;
margin: 0 auto;
}
.l-inline li {
display: inline-block;
}
#l-primary-nav ul {
width: 99.8%;
margin: 0;
padding: 0;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-bottom: 1px solid #c2c2c2;
float: left;
display: table;
}
#l-primary-nav li {
text-align: center;
display: table-cell;
vertical-align: bottom;
border-top: 1px solid #c2c2c2;
}
#l-primary-nav li a{
line-height: 40px;
height: 41px;
border-top: 1px transparent;
display: block;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.18, #FBFBFB), color-stop(1, #D1D1D1));
background-image: -o-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -moz-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -webkit-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: -ms-linear-gradient(bottom, #FBFBFB 0%, #D1D1D1 100%);
background-image: linear-gradient(to bottom, #FBFBFB 0%, #D1D1D1 100%);
}
#l-primary-nav li a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E1E3E6), color-stop(1, #BABCBF));
background-image: -o-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -moz-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -webkit-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: -ms-linear-gradient(bottom, #E1E3E6 0%, #BABCBF 100%);
background-image: linear-gradient(to bottom, #E1E3E6 0%, #BABCBF 100%);
}
#l-primary-nav li.active a{
margin-top: -5px;
height: 45px;
position: relative;
background: #fff;
border-left: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
border-top: 1px solid #c2c2c2;
}