CSS:重叠无序垂直列表

时间:2016-09-11 20:59:47

标签: html css html-lists navigationbar

请查看以下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 &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>
&#13;
&#13;
&#13;

我的CSS无序列表链接存在问题。这些链接不是单独出现的。例如,Link1(Curriculum)正在运行到Link2(ERSEA),这样就开始了。另外,我创建了两个<div>标签,设置了div的一到25%,另一个设置为div的75%。然而,他们正在互相干扰,正如你可以从我的小提琴中看到的,&#34;这是一个测试&#34;文字显示在我的无序列表后面。

我需要将我的侧面导航栏固定在一个位置,并将所有链接放在各自独立的行上。另外,我需要有&#34;这是一个测试&#34;文本出现在网站的独立部分;在侧面导航栏的右侧。

1 个答案:

答案 0 :(得分:0)

您有几个问题:

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

  2. 您已将.sideNav设置为position: fixed,这意味着它不会被计算到&#34; flow&#34;在网站上的其他项目,因此坐在他们之上。

  3. 这里有一点点更新的css可以帮助你......

    &#13;
    &#13;
    .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%;
    }
    &#13;
    &#13;
    &#13;