li元素在響應式網頁中的奇怪行爲

嗨，我是編碼方面的新手，並且在家裏自學。我遇到了一個我無法解決的問題。li元素在響應式網頁中的奇怪行爲

首先，這裏是codepen鏈接的網站：

該網站除了一個問題的工作非常完美。

查看頁面左側的'item'列表。我已經設置好了，以便在懸停時改變字體顏色，背景顏色和字體大小（我必須更改填充以確保li保持相同的大小）。當屏幕尺寸大於900像素時，這可以正常工作。

現在我已使頁面響應並設置媒體查詢以將佈局更改爲900px以下。項目列表以其格式佈局在網格中而不是單個列中的新格式移動到頁面的頂部。除了每行右側的最後一項（項目3和項目6）之外，這看起來工作正常。每當我將鼠標懸停在它上面時，它會將下一個項目向右推動兩個空格，留下兩個空白空間。我正在使用的HTML編輯器之一顯示了兩個不存在的「幽靈」li項目的存在。

任何猜測？

我也接受任何意見或批評的網站，渴望學習。

這裏的原始代碼

<html> 
    <head> 

     <title>Food Supply Company</title> 

     <link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css"> 

     <link href="https://fonts.googleapis.com/css?family=Volkhov:700|Alegreya:900" rel="stylesheet"> 

    </head> 

    <body> 

    <div class="container"> 

     <div class="title"> 
     <h1>Food Supply Company</h1> 
     </div> 

     <ul class="menunav"> 
      <ul class="Products"> 
      <li><a href="#" >Products</a> 
       <ul class="productsnav"> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Fruits</a></li> 
       <li><a href="#">Vegetables</a></li> 
       <li><a href="#">Dry Foods</a></li> 
       <li><a href="#">Spices</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="AboutUs"> 
      <li><a href="#" >About Us</a> 
       <ul class="aboutusnav"> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">History</a></li> 
       <li><a href="#">Mission</a></li> 
       <li><a href="#">Personel</a></li> 
      </ul> 
      </li> 
       </ul> 
       <ul class="Contact"> 
       <li><a href="#" >Contact</a></li> 
       </ul> 
     </ul> 

     <div class="ProductMain"> 
     <div class="sidebar"> 
      <div class="logoholder"> 
      <a href="#"><img src="https://c1.staticflickr.com/1/501/32498772122_9137841b84_o.png" alt="Company Logo Letters Only" height="130" width="130"></a> 
      </div> 
      <div class="sidebarlinks"> 
      <ul> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 3</a></li> 
       <li><a href="#">Item 4</a></li> 
       <li><a href="#">Item 5</a></li> 
       <li><a href="#">Item 6</a></li> 
       <li><a href="#">Item 7</a></li> 
       <li class="lastitem"><a href="#">Item 8</a></li> 
      </ul> 
      </div> 
     </div> 

     <div class="maincontent"> 
      <h1 class="productname">Item Name</h1> 

      <img src="http://pngimg.com/upload/mango_PNG9168.png" > 
      <div class="Attributes"> 
      <div class="Titles"> 
       <ul> 
       <li>Country:</li> 
       <li>Variety:</li> 
       <li>Season:</li> 
       </ul> 
      </div> 
      <div class="Names"> 
       <ul> 
       <li>Australia</li> 
       <li>Tastey</li> 
       <li>October-December</li> 
       </ul> 
      </div> 
      </div> 
      <div class="Description"> 
       You can add a description of the item. Mention the history, the taste and other attributes of the product. 
      </div> 
     </div> 


     </div> 
      <div class="foot"> 
       <div class="footer left">Website Designer<br>Happy Designs Inc.<br>Qatar</div> 
       <div class="footer center">&copy Food Supply Company</div> 
       <div class="footer right">P.O.Box 11111<br>Doha<br>Qatar</div> 
      </div> 
     </div> 




</body> 

</html>

CSS

*{ 
    Margin:0;  
    padding:0; 
    border-radius:5px; 
    font-family: 'Verdana',sans-serif; 
} 

body{ 
    background-image: url(https://c1.staticflickr.com/1/470/32498869432_082f3cf148_o.jpg); 
    background-size:  cover;    
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed; 
} 

.container{ 
    width: 900px; 
    margin:auto; 
    position:relative; 
} 

h1{ 
    font-family: 'Alegreya:900','Verdana',sans-serif; 
    padding:20px 0 15px 0; 
    text-align: center; 
    font-weight: 900; 
    font-size:65px; 
    letter-spacing: 2px; 
    color:coral; 
    text-shadow: 3px 3px 1px grey; 
    Width: 100%; 
    margin:10px 0 20px 0; 

} 

a{ 
    text-decoration: none; 
    text-align: center; 
    font-family: 'verdana', sans-serif; 
} 

p{ 
    font-family: 'verdana', sans-serif; 
} 

li{ 
    list-style-type:none; 
} 

.menunav{ 
    margin:5px 0 30px 0; 
    overflow:auto; 
    font-size: 20px; 
} 

.menunav a{ 
    float:left; 
    margin:0px 3px 5px 3px; 
    width:293px; 
    padding: 5px 0px 5px 0px; 
    background-color: rgba(255,127,80,0.85); 
    color: bisque; 
    box-shadow: 2px 2px 2px 0px darkgray; 
} 

.menunav a:hover{ 
    background-color: bisque; 
    color: coral; 
} 

.productsnav, .aboutusnav{ 
    position:absolute; 
    top:134px; 
    background-color:rgba(0,0,0,0); 
    z-index: 1; 
} 

.aboutusnav{ 
    margin-left:298px; 
} 

.productsnav a, .aboutusnav a{ 
    width:293px; 
    display: none; 
    background-color:coral; 
} 

.Products:hover .productsnav a{ 
    display:block; 
} 

.AboutUs:hover .aboutusnav a{ 
    display:block; 
} 

.ProductMain{ 
    position:relative; 
    overflow: auto; 
    margin-bottom:18px; 
    padding-bottom:5px; 
} 

.sidebar{ 
    float:left;; 
    width:250px; 
    margin-left:3px; 
} 

.sidebar a{ 
    font-size: 16px; 
    display: block; 
    padding: 15px 0px; 
    background-color: rgba(255, 228, 196,0.85); 
    color:coral; 
    font-weight: bold; 
    margin-bottom:5px; 
    box-shadow: 2px 2px 2px 0px darkgray; 
} 

.sidebar a:hover{ 
    color:lightgray; 
    background-color:coral; 
    font-size:20px; 
    padding:13px 0px; 
} 


.sidebar .logoholder a{ 
    background-color:rgba(0,0,0,0); 
    box-shadow: none; 
} 

.sidebar .logoholder a:hover{ 
    padding:15px 0px 13px 0px; 
} 

.logoholder img{ 
    background-color: rgba(0,0,0,0); 
} 

.lastitem a{ 
    margin-bottom: 0px; 
} 

.maincontent { 
    background-color:rgba(244,164,96,0.8); 
    position:absolute; 
    left: 270px; 
    height: 99.2%; 
    width: 600px; 
    box-shadow: 2px 2px 7px 2px darkgray; 
    box-sizing:border-box; 

} 

.productname{ 
    font-size:35px; 
    margin:0; 
    padding: 20px 0 15px 0; 
    background-color: rgba(0,0,0,0); 
    color: bisque; 
    border-bottom-style:double; 
    border-bottom-width: 4px; 
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px; 
    border-bottom-color:bisque; 
    box-shadow: none; 
} 

.maincontent img{ 
    float:left; 
    width:250px; 
    height:240px; 
    background-color:rgba(0,0,0,0); 
    margin: 20px -5px 0px 30px; 
} 

.Attributes{ 
    position:relative; 
    right:-8px; 
    top:35px; 
    overflow:auto; 
    height:auto; 
    padding: 0px 5px; 
    background-color:rgba(255, 228, 196,0.5) ; 
    border-style:inset; 
    border-width: 3px; 
    margin-bottom:90px; 
    width:270px; 
} 


.Titles, .Names{ 
    display: inline-block; 
    line-height:3.7em; 

} 


.Titles li, .Names li{ 
    border-radius: 0; 
    font-weight: bold; 
    color:chocolate; 
} 

.Titles li{ 
    font-size:17px; 
    text-align: center; 
} 

.Names li{ 
    padding-left:5px; 
} 

.Description{ 
    width:500px; 
    height:180px; 
    overflow:auto; 
    margin:auto; 
    padding: 10px 15px ; 
    background-color:rgba(255, 228, 196,0.5); 
    border-style:inset; 
    border-width: 3px; 
    color:chocolate; 
    line-height:1.5em; 
} 

.foot{ 

    width: 860px; 
    height:70px; 
    background-color: rgba(255, 228, 196,0.9); 
    margin: 10px 0px; 
    box-shadow: 2px 2px 2px 0px darkgray; 
    padding: 10px 20px 20px 20px; 
    color:coral; 
} 

.footer{ 
    display:inline-block; 
    width:33%; 
    background-color: rgba(0,0,0,0); 
    height:100%; 
    padding:10px; 
    box-sizing:border-box; 
    margin:-3px; 
    font-size: 15px; 
    line-height:1.5em; 
} 

.right{ 
    text-align: right; 
} 

.center{ 
    text-align:center; 
} 

@media screen and (max-width:920px){ 

    .container{ 
    width: 600px; 
    margin:auto; 
    position:relative; 
    } 

    .menunav a{ 
    float:left; 
    width:32%; 
    } 


    .productsnav{ 
    position:absolute; 
    top: 213px; 
    } 

    .aboutusnav{ 
    position:absolute; 
    top: 213px; 
    margin-left:198px; 
    } 

    .productsnav a, .aboutusnav a{ 
    width:190px; 
    } 

    .ProductMain{ 
    position: relative; 
    height:800px;; 
    margin-bottom:18px; 
    margin-right: 0px; 
    padding-bottom:5px; 
    width:600px; 

    } 

    .logoholder{ 
     display:none; 
    } 

    .sidebar{ 
     width:99%; 
     position:relative; 
     float:none; 
     display:inline-block; 
     padding-left:10px; 
    } 

    .sidebar a{ 
     width:32%; 
     float:left; 
     margin-right:5px; 
    } 

    .maincontent 
    { 
     position:static; 
     margin-top:15px; 
     height:600px; 
     width:99%; 
    } 

    .foot{ 
     width:100%; 
     padding:0; 
     height:90px; 
    } 

    .footer{ 
     margin-top:0; 
    } 

    .left{ 
     margin-left: 13px; 
    } 

    .center{ 
     width:30%; 
    } 

    .sidebar a:hover{ 
    color:lightgray; 
    background-color:coral; 
    font-size:24px; 
    padding:10px 0;  
    } 

}

來源

2017-02-01 shea

還有一個問題，我無法得到我已經鏈接到我的HTML文件加載在頁面上的谷歌字體。任何幫助？ – shea

我似乎沒有像你所描述的那些問題，沒有任何事情會影響我。 – Sergi

來解決問題的最短方法是設置爲font-size:23px;.sidebar a:hover

.sidebar a:hover{ 
    color:lightgray; 
    background-color:coral; 
    font-size:23px; 
    padding:10px 0;  
}

codepen

來源

2017-02-01 19:49:38 Banzay

li元素在響應式網頁中的奇怪行爲

回答

相關問題