Html 响应网页中li元素的奇怪行为
您好，我是一名编码新手，在家自学。我遇到了一个我根本解决不了的问题 首先，这里是站点的代码笔链接： 除了一个问题外，该网站的运作几乎天衣无缝 查看页面左侧的“项目”列表。我对它进行了设置，以便在悬停时字体颜色、背景色和字体大小都会发生变化（我必须更改填充，以确保li保持相同的大小）。当屏幕大小大于900px时，此功能正常工作 现在，我已使页面响应，并设置了一个媒体查询，以将布局更改为900px以下。项目列表将以一种新格式移动到页面顶部，并以网格而不是单列的形式进行布局。除了每行右边的最后一项（第3项和第6项）之外，这看起来工作正常。每当我将鼠标悬停在它上面时，它就会将行中的下一项推到右边两个空格上，留下两个空格。我正在使用的一个HTML编辑器显示了两个不存在的“ghost”li项 猜猜看 我也乐于接受对网站的任何评论或批评，渴望学习 这是原始代码Html 响应网页中li元素的奇怪行为,html,css,html-lists,Html,Css,Html Lists,您好，我是一名编码新手，在家自学。我遇到了一个我根本解决不了的问题 首先，这里是站点的代码笔链接： 除了一个问题外，该网站的运作几乎天衣无缝 查看页面左侧的“项目”列表。我对它进行了设置，以便在悬停时字体颜色、背景色和字体大小都会发生变化（我必须更改填充，以确保li保持相同的大小）。当屏幕大小大于900px时，此功能正常工作 现在，我已使页面响应，并设置了一个媒体查询，以将布局更改为900px以下。项目列表将以一种新格式移动到页面顶部，并以网格而不是单列的形式进行布局。除了每行右边的最后一项（
<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">© Food Supply Company</div>
<div class="footer right">P.O.Box 11111<br>Doha<br>Qatar</div>
</div>
</div>
</body>
</html>
解决此问题的最短方法是设置
font size:23px用于。侧栏a：悬停
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:23px;
padding:10px 0;
}
还有一个问题，我无法将链接到html文件中的谷歌字体加载到页面上。有什么帮助吗？我似乎没有任何问题像你描述的那样，没有什么会让我崩溃。
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:23px;
padding:10px 0;
}