高度應用中偶遇的小問題
阿新 • • 發佈：2018-03-07
寬度 :hover 情況 href 微軟 mil text 原因 white
最近在練習時遇到一個高度帶來的小問題，在此記錄一下。
問題代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; font-size: 12px; } body{ background-color: #f5f5f5; } ul,div{ padding: 0; margin: 0; } #top{ width: 100%; height:27px; background:url("/images/top_bg.jpg") repeat-x; } #top_content{ width: 1000px; margin: 0 auto; }#top_content ul{ height: 27px; } #top_content li{ float: right; list-style: url("/images/li_bg.gif") inside; width: 90px; line-height:27px } #top_content a:link,#top_content a:visited{ color: #8e8e8e; text-decoration: none; } #top_content a:hover,#top_content a:active { text-decoration: none; color: #900; } #wrap{ width: 1000px; margin: 0 auto; } #logo{ height: 80px; background-color: white; } #logo .logo_left{ float: left; } #logo .logo_right{ float: right; height: 28px; margin-top: 26px; width: 300px; color: #8e8e8e; } #logo .logo_right p img{ vertical-align: middle; margin-right: 10px; } #logo .logo_right p span{ color: #c00; font-family: "微軟雅黑",serif; font-size: 16px; } #nav{ background-color: #8f8f8f; height: 40px; border: 1px #8f8f8f solid; border-radius: 3px; } #nav_mid{ width: 980px; margin: 0 auto; height: 40px; } #nav_left,#nav_right{ float: left; } #nav_left{ width: 680px; } #nav_right{ width: 300px; } #nav_left li{ float: left; width: 100px; list-style-type: none; text-align: center; line-height: 40px; } #nav_left a:link,#nav_left a:visited{ text-decoration: none; color:#ffffff ; font-size: 16px; font-family: “微軟雅黑”, serif; } #nav_left a:hover,#nav_left a:active{ text-decoration: none; color:#ffff00; font-size: 16px; font-family: “微軟雅黑”, serif; } #nav_right .search_text{ width: 190px; height: 25px; margin-top: 6px; background: url("/images/search.jpg") no-repeat center right #ffffff; padding-right: 25px; border: 1px solid #ffffff; } </style> </head> <body> <div id="top"> <div id="top_content"> <ul> <li><a href="#">聯系我們</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">設為首頁</a></li> </ul> </div> </div><!--top結束--> <div id="wrap"> <div id="logo"> <div class="logo_left"> <img src="images/logo.jpg"> </div> <div class="logo_right"> <p><img src="images/tel.jpg">24小時服務熱線：<span class="tel">123-456-7890</span></p> </div> </div><!--logo結束--> <!--<div style="width: 1000px;height: 3px;background-color: white"></div>--> <div id="nav"> <div id="nav_mid"> <div id="nav_left"> <ul> <li><a href="#">首 頁</a></li> <li><a href="#">關於慕課</a></li> <li><a href="#">新聞動態</a></li> <li><a href="#">課程中心</a></li> <li><a href="#">在線課程</a></li> <li><a href="#">人才招聘</a></li> </ul> </div> <div id="nav_right"> <form action="" method="post"> <input type="text" class="search_text"/> </form> </div> </div> </div><!--nav結束--> </div><!--wrap結束--> </body> </html>
結果圖：
這裏很尷尬地出現了錯位的情況。檢查發現：
#logo的高度雖然設置為80px，但是由於height默認值為auto而非inherit，因而其子元素.logo_left的高度值並沒有繼承父級的80px，且由於瀏覽器解析的原因，.logo_left的高度大於80px（雖然開始用*去除了默認格式，但是不知道為什麽還會這樣。。。）
又由於.logo_left設置了float屬性，.logo_left浮於文檔流之上，並沒有將包裹它的父元素的高度撐開，因此當.nav_mid與.logo緊貼時，第一個<li>會空出圖片寬度的距離，導致整行寬度不夠將<input>標簽擠到了下一行。
給.logo_left加上height:80px或height:100%或height:inherit即可修正。
高度應用中偶遇的小問題