无法摆脱菜单中的列表项高度

嗨，我只是想编码一个像BBC网站只是为了练习，而这样做我得到了一个li项目的ul项目中的错误我不知道问题，但是当我给它一个border-right边界需要更多的高度，然后原来的菜单，我粘贴我的代码在这里，请检查并帮助我？简单的话，我想列表项的边界等于“签到”和“标志”的边界DIV无法摆脱菜单中的列表项高度

<html> 
    <head> 
    <title>BBC</title> 
    <style> 
    body{ 
    margin:0; 
    font-family:Arial,Helvetica,freesans,sans-serif; 

    } 

    #top{ 
    width:100%; 
    height:50px; 

    } 
    .keepcenter{ 
    width:1100px; 
    margin: 0 auto; 
    } 
    #logo{ 
    border-right:1px solid #CCCCCC; 
    float:left; 
    padding-right:5px; 
    height:100%; 
    } 
    #signin{ 
    font-weight:bold; 
    font-size:0.9em; 
    border-right:1px solid #CCCCCC; 
    width:200px; 
    height:100%; 
    float:left; 
    } 
    #signin img{ 
    position:relative; 
    top:5px; 
    margin-left:15px; 
    } 

    #signin p{ 
     display:inline; 
     position:relative; 
     top:1px; 
     padding-left:5px; 
    } 
    #menutop{ 
    float:left; 
    } 
    #menutop ul{ 
    list-style-type:none; 
    margin:0; 
    padding:0; 

    } 
    #menutop li{ 
    padding:15px 20px 10px 20px; 
    display:inline; 
    font-weight:bold; 
    font-size:0.9em; 
    float:left; 
    border-right:1px solid #CCCCCC; 
    height:100%; 

    } 
    </style> 
    </head> 

    <body> 
    <div id="container"> 
    <div id="top"> 

    <div class="keepcenter"> 

    <div id="logo"> 
    <img src="images/logo.jpg" /> 
    </div> 
    <div id="signin"> 
    <img src="images/signicon.png" /><p>Sign In</p> 
    </div> 
    <div id="menutop"> 
    <ul> 
    <li>Home</li> 
    <li>Home</li> 
    <li>Home</li> 
    <li>Home</li> 
    <li>Home</li> 
    </ul> 
    </div> 

    </div> 
</div> 


</div> 

</body> 

</html>

来源

2015-11-14 vampz

你的意思是边框与李的填充高度相同吗？这很正常。在[this fiddle]（http://jsfiddle.net/MrLister/LffvtLxr/）中，我在菜单下方包含了一条水平线，您可以看到，如果删除边框，则规则不会改变位置。所以边界不会占用任何额外的垂直空间。或者，我误解了这个问题吗？ –

是的，我想边界限制到菜单高度看到登录和标识的边界，他们是在确切的高度，我只是希望李边界是这两个相同的高度。简单地说，我希望列表项目的边框等于“Signin”和“logo”的边框div – vampz

你现在明白了吗？ @Mr lister – vampz

只需从列表项删除顶部和底部填充。

body { 
 
    margin: 0; 
 
    font-family: Arial, Helvetica, freesans, sans-serif; 
 
} 
 
#top { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.keepcenter { 
 
    width: 1100px; 
 
    margin: 0 auto; 
 
} 
 
#logo { 
 
    border-right: 1px solid #CCCCCC; 
 
    float: left; 
 
    padding-right: 5px; 
 
    height: 100%; 
 
} 
 
#signin { 
 
    font-weight: bold; 
 
    font-size: 0.9em; 
 
    border-right: 1px solid #CCCCCC; 
 
    width: 200px; 
 
    height: 100%; 
 
    float: left; 
 
} 
 
#signin img { 
 
    position: relative; 
 
    top: 5px; 
 
    margin-left: 15px; 
 
} 
 
#signin p { 
 
    display: inline; 
 
    position: relative; 
 
    top: 1px; 
 
    padding-left: 5px; 
 
} 
 
#menutop { 
 
    float: left; 
 
} 
 
#menutop ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#menutop li { 
 
    padding: 0 20px; 
 
    display: inline; 
 
    font-weight: bold; 
 
    font-size: 0.9em; 
 
    float: left; 
 
    border-right: 1px solid #CCCCCC; 
 
    height: 100%; 
 
}

<div id="container"> 
 
    <div id="top"> 
 
    <div class="keepcenter"> 
 
     <div id="logo"> 
 
     <img src="http://lorempixel.com/40/40" alt="BBC" /> 
 
     </div> 
 
     <div id="signin"> 
 
     <img src="http://lorempixel.com/g/10/10" alt="" /> 
 
     <p>Sign In</p> 
 
     </div> 
 
     <div id="menutop"> 
 
     <ul> 
 
      <li>Home</li> 
 
      <li>Home</li> 
 
      <li>Home</li> 
 
      <li>Home</li> 
 
      <li>Home</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

名单，虽然浮动，这意味着它的底线不一定是一样的#signin股利。在我的代码片段中，div中的img足够小以至于没有效果，但取决于其大小，div的基线（因此p的位置）将下移。你可能不得不在ul中补偿。

来源

2015-11-14 07:48:23

我应该随着身高的下降吗？因为#menutop li的高度越来越低，可以使其等于其他div的边界..这是一个好的解决方案吗？就像我将高度降低到50％那样，列表项的边框就等于其他的div边框。 – vampz

就像我说的那样，这取决于图像的大小，相对于字体大小。 –

好的谢谢先生，我已经减少了它的身高，现在它是完美的。 – vampz

无法摆脱菜单中的列表项高度

回答

相关问题