边框伸出顶部酒吧

问题描述：

以下是我的代码。我的问题是低于：边框伸出顶部酒吧

<html> 
<head> 
    <title>My BBC News Reader</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style type="text/css"> 

    body { 
     margin:0; 
     font-family:arial, helvetica, sans-serif; 
    } 

    #topbar { 
     background-color:#7A0000; 
     width:100%; 
     height:40px; 
     color:white; 
    } 

    .fixedwidth { 
     width:1050px; 
     margin:0 auto; 
    } 

    #logodiv { 
     padding-top:5px; 
     float:left; 
     border-right:1px solid #990000; 
     padding-right:10px; 
    } 

    #signindiv { 
     font-weight:bold; 
     font-size:0.9em; 
     padding: 6px 80px 12px 20px; 
     float:left; 
     border-right:1px solid #990000; 
    } 

    #signindiv img { 
     position:relative; 
     top:3px; 
    } 

    #topmenudiv { 
     float:left; 
    } 

    #topmenudiv ul { 
     padding:0; 
     margin:0; 
    } 

    #topmenudiv li { 
     list-style:none; 
     font-weight:bold; 
     font-size:0.9em; 
     border-right:1px solid #990000; 
     height:100%; 
     padding:10px 20px 12px 20px; 
     float:left; 
    } 

    #searchdiv { 
     padding:5px 0 0 10px; 
     float:left; 

    } 

    #searchdiv input { 
     height:25px; 
     border:none; 
     padding-left:10px; 
     background-image:url("images/glass.png"); 
     background-repeat:no-repeat; 
     background-position:right center; 
    } 


    </style> 

</head> 
<body> 
    <div id="container"> 

     <div id="topbar"> 

      <div class="fixedwidth"> 

       <div id="logodiv"> 

        <img src="images/bbclogo.png"/> 

       </div> 

       <div id="signindiv"> 

        <p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p> 

       </div> 

       <div id="topmenudiv"> 

        <ul> 
         <li>News</li> 
         <li>Sport</li> 
         <li>Weather</li> 
         <li>iPlayer</li> 
         <li>TV</li> 
         <li>Radio</li> 
         <li>More...</li> 
        </ul> 

       </div> 

       <div id="searchdiv"> 

        <input type="text" placeholder="Search"/> 

     </div> 
    </div> 
</body> 
</html>

为了表明，我在这里上传的代码 - http://www.mazdoor.net/bbcnews.html。一旦我解决了问题，我将删除。 1.垂直边框线突出。我无法弄清楚问题是什么。 2.登录标志和文字不与BBC标志对齐。

请帮助我。我刚刚在4天前开始使用HTML和CSS。

谢谢

你没有说你怎么想事情的样子。 – 2014-12-11 04:13:24

答

删除

#topmenudiv li{ 
    height: 100%; <!--- remove 
} 

#signindiv p{ 
    margin:0; <!--- remove default margin given by browser 
}

答

这是因为在列表项上设置了填充。

试试这个：

#topmenudiv li { 
    list-style: none; 
    font-weight: bold; 
    font-size: 0.9em; 
    border-right: 1px solid #990000; 
    height: 100%; 
    padding: 0px 20px; 
    float: left; 
    line-height: 35px; 
}

这将去除填充的高度，并与line-height设置文本的垂直高度。

答

这是这里所有的东西正确的代码

<html> 
<head> 
    <title>My BBC News Reader</title> 

    <meta charset="utf-8" /> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style type="text/css"> 

    body { 
     margin:0; 
     font-family:arial, helvetica, sans-serif; 
    } 

    #topbar { 
     background-color:#7A0000; 
     width:100%; 
     height:auto; 
     color:white; 
    } 

    .fixedwidth { 
     width:1050px; 
     margin:0 auto; 
    } 

    #logodiv { 
     padding-top:15px; 
     float:left; 
     border-right:1px solid #990000; 
     padding-right:10px; 
     min-height: 53px; 
    } 

    #signindiv { 
     font-weight:bold; 
     font-size:0.9em; 
     padding: 6px 80px 12px 20px; 
     float:left; 
     border-right:1px solid #990000; 
    } 

    #signindiv img { 
     position:relative; 
     top:3px; 
    } 

    #topmenudiv { 
     float:left; 
    } 

    #topmenudiv ul { 
     padding:0; 
     margin:0; 
    } 

    #topmenudiv li { 
     list-style:none; 
     font-weight:bold; 
     font-size:0.9em; 
     border-right:1px solid #990000; 
     /*height:100%;*/ 
     padding:26px 20px; 
     float:left; 
    } 

    #searchdiv { 
     padding:5px 0 0 10px; 
     float:left; 

    } 

    #searchdiv input { 
     height:25px; 
     border:none; 
     padding-left:10px; 
     background-image:url("images/glass.png"); 
     background-repeat:no-repeat; 
     background-position:right center; 
    } 

    .clear{float:none !important;clear:both;} 
    ul li:last-of-type{padding:0px !important;border:none;height:0px !important;} 
    </style> 

</head> 
<body> 
    <div id="container"> 

     <div id="topbar"> 

      <div class="fixedwidth"> 

       <div id="logodiv"> 
        <img src="images/bbclogo.png"/> 
       </div> 

       <div id="signindiv"> 
        <p><img src="images/signin.png" width="18px" height="18px"/>Sign in</p> 
       </div> 

       <div id="topmenudiv"> 
        <ul> 
         <li>News</li> 
         <li>Sport</li> 
         <li>Weather</li> 
         <li>iPlayer</li> 
         <li>TV</li> 
         <li>Radio</li> 
         <li>More...</li> 
         <li class='clear'></li> 
        </ul> 
       </div> 

       <div id="searchdiv"> 
        <input type="text" placeholder="Search"/> 
       </div> 

       <div class='clear'></div> 
      </div> 
    </div> 
</body> 
</html>

我做了什么很难解释我解释它briefly.study代码...，并试图了解

1。 <li class='clear'></li>在UL <div class='clear'></div>添加了明确的花车加清晰花车固定宽度的div

变化的顶栏DIV高度自动根据其内部的内容，以获得顶栏的高度。

#topmenudiv li填充变化padding: 26px 20px那么它的高度将等于signindiv的高度。

删除#topmenudiv李高度则#topmenudiv li高度将是高度自动。（如果#topmenudiv li{height:auto;}列表项得到充分的唤起注意屏幕）

2. 对齐标识垂直简单地增加填料顶价值logodiv.you必须使用您的视线，以检查它是否与标识标志对齐。

边框伸出顶部酒吧

相关推荐