导航边框的高度不一样

我在这个网站上工作：http://www.problemio.com，我对css有很少的了解:)并且在StackOverflow的帮助下以某种方式挣扎。导航边框的高度不一样

为什么导航栏中的小垂直线边框的高度不同，我再次陷入困境？

我理想上喜欢使它们比字体大小略短。有没有办法让我这样做？

谢谢！

这里是我的CSS：

.menusystem 
{ 
    position: absolute; 
    font-size: 1em; 
    color: white; 
} 

.menusystem ul, .menusystem li 
{ 
    margin: 0; 
    padding: 0; 
} 
.menusystem li 
{ 
    list-style: none outside none; 
} 

.menusystem ul 
{ 
    list-style: none; 
} 

.menusystem ul li ul 
{ 
    display: none; 
    position: absolute; 
    top: 1.6em; 
    right: 0; 
} 

.menusystem li a 
{ 
    text-decoration: none; 
} 

.menusystem ul li.main_menu_li 
{ 
    padding-right: 20px; 
    padding-left: 20px; 
    padding-top: 7px; 

    display: block; 
    float:right; 

    margin-right:0.2em; 
    text-align: center; 
    border-left: solid 1px white; 
    line-height: 1em; 
} 

.menusystem ul li.main_menu_li_left 
{ 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 7px; 

    display: block; 
    float:right; 
    margin-right:0.2em; 
    text-align: center; 
    line-height: 1em; 
} 

/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those \*/ 
* html ul li { float: left; } 
* html ul li a { height: 1%; } 


.menusystem li:hover ul, .menusystem li.mouseHover ul { 
    display: block; 
} 

.menusystem li ul.child_menu_ul li a 
{ 
    color: #fff; 


    font-size: 80%; 
    text-shadow: none; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-bottom: 1px solid #2e6ea4; 
    border-top: 0px; 
    background: none repeat scroll 0 0 #2E6EA4; 
} 


.menusystem li ul.child_menu_ul li.first a 
{ 
    -moz-border-radius-topleft: 14px; 
    -moz-border-radius-topright: 14px; 
    -webkit-border-top-left-radius: 14px; 
    -webkit-border-top-right-radius: 14px; 
    -moz-border-radius-bottomleft: 0; 
    -moz-border-radius-bottomright: 0; 
    -webkit-border-bottom-left-radius: 0; 
    -webkit-border-bottom-right-radius: 0; 
    border-top: 1px solid #2e6ea4; 
} 


.menusystem li ul.child_menu_ul li.last a 
{ 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
     -moz-border-radius-bottomleft: 14px; 
    -moz-border-radius-bottomright: 14px; 
    -webkit-border-bottom-left-radius: 14px; 
    -webkit-border-bottom-right-radius: 14px; 
} 


.menusystem li ul.child_menu_ul li a:hover 
{ 
    color: #ff0; 
    background: #2e6ea4; 
} 

/*.menusystem li.main_menu_li a */ 
.menusystem ul.child_menu_ul a 
{ 
    color: #fff;    
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9); 
} 

.menusystem li.main_menu_li a:hover 
{ 
    color: orange; 
}

来源

2011-10-04 GeekedOut

他们是不同的高度，因为他们是边框和元素具有不同的高度。

给他们一个统一的高度：

.menusystem ul li.main_menu_li { 
    height: 27px; 
}

来源

2011-10-04 18:28:47 Blender

你指的是元素具有不同的高度设置？哪里？我不知道。或者他们是不同的高度导致一个形式？ – GeekedOut

也删除填充顶部规则并将其替换为适当的边距顶部规则将有助于正确对齐它。 –

如果您使用Firebug for Firefox或Chrome的Inspector，请检查元素。所有三个人都有不同的高度。 – Blender

导航边框的高度不一样

回答

相关问题