邊框伸出頂部酒吧

以下是我的代碼。我的問題是低於：邊框伸出頂部酒吧

<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 Ahmed Althaf

你沒有說你怎麼想事情的樣子。 – 2014-12-11 04:13:24

刪除

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

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

來源

2014-12-11 05:02:28

這是因爲在列表項上設置了填充。

試試這個：

#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設置文本的垂直高度。

來源

2014-12-11 04:17:28

這是這裏所有的東西正確的代碼

<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必須使用您的視線，以檢查它是否與標識標誌對齊。

來源

2014-12-11 04:36:34 Susantha7

邊框伸出頂部酒吧

回答

相關問題