请查看以下fiddle .
.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 & 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(类(class))正在运行到 Link2(ERSEA),依此类推。另外,我创建了两个 <div>
标签,将一个设置为 div 的 25%,将另一个设置为 div 的 75%。但是,它们相互干扰,正如您从我的 fiddle 中看到的那样,“这是一个测试”文本出现在我的无序列表后面。
我需要将侧边导航栏固定在一个位置,并将所有链接放在各自单独的行中。此外,我需要让“This is a test”文本出现在网站的单独部分;在侧面导航栏的右侧。
最佳答案
你有几个问题:
您已将 li:s 设置为
float: left
,这将使它们合并在一起。您已将 .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%;
}
关于html - CSS:重叠无序垂直列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39440607/