CSS：重複していない縦リスト

Question

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>

私は私のCSS順不同リストのリンクの問題を抱えています。リンクはそれぞれ別の行には表示されません。たとえば、Link1（カリキュラム）はLink2（ERSEA）に実行されています。また、2つの<div>タグを作成し、1つをdivの25％、もう1つをdivの75％に設定しました。しかし、私のフィドルから見ることができるように、彼らは互いに干渉しています。私の順序付けられていないリストの後ろには、「これはテストです」というテキストが表示されます。

私のサイドナビゲーションバーが1つの位置に固定され、すべてのリンクがそれぞれ別の行にある必要があります。さらに、私は "This is a test"というテキストをサイトの別の部分に表示する必要があります。サイドナビゲーションバーの右側に移動します。あなたが問題のカップルてい

Answer 1

：

1. を、あなたのリチウムを設定している：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%; 
 
}