CSS：重叠无序垂直列表

Question

请检查以下小提琴 。

 .sideNav { width: 25%; } .sideNav ul { list-style-type: none; margin: 0; padding: 0; width: 25%; height: 100%; position: fixed; overflow: auto; } .sideNav li a { display: block; color: black; text-align: center; text-decoration: none; } .sideNav li { font-family: "Comic Sans MS", cursive; text-align: center; float: left; } .right { width: 75%; } 

 <div class="content"> <div class="sideNav"> <ul> <li><a href="curriculum.html">Curriculum</a> </li> <li><a href="ersea.html">ERSEA</a> </li> <li><a href="family-services.html">Family Services</a> </li> <li><a href="mental-health.html">Mental Health</a> </li> <li><a href="nutrition.html">Nutrition</a> </li> <li><a href="health.html">Health</a> </li> <li><a href="policies.html">Policies &amp; Procedures</a> </li> <li><a href="ersea.html">ERSEA</a> </li> <li><a href="family-services.html">Family Services</a> </li> <li><a href="mental-health.html">Mental Health</a> </li> <li><a href="nutrition.html">Nutrition</a> </li> </ul> </div> <div class="right"> This is a test </div> </div> 

我的CSS无序列表链接有问题。 链接不会单独出现在单独的行中。 例如，Link1（课程）一直运行到Link2（ERSEA）中。 此外，我创建了两个<div>标记，分别将其设置为div的25％，将另一个设置为div的75％。 但是，它们彼此干扰，正如您从我的小提琴中看到的那样，“这是测试”文本出现在我的无序列表后面。

我需要将侧面导航栏固定在一个位置，并且所有链接都位于单独的行上。 另外，我需要在网站的单独部分中显示“这是测试”文本； 在侧面导航栏的右侧。

Answer 1

您有几个问题：

1. 您已将li：s设置为float: left ，这将导致它们合并在一起。

2. 您已将.sideNav设置为position: fixed ，这意味着它不会被计入网站上其余项目的“流”中，因此位于它们之上。

这里有一些更新的CSS可以帮助您一点点...

 .sideNav { width: 25%; } .sideNav ul { list-style-type: none; margin: 0; padding: 0; width: 25%; height: 100%; position: fixed; overflow: auto; } .sideNav li a { display: block; color: black; text-align: center; text-decoration: none; } .sideNav li { font-family: "Comic Sans MS", cursive; text-align: center; display: block; } .right { padding-left: 25%; width: 75%; }