こんにちは,
htmlでタグ<li></li>を使うとリストの項目を記述することができることを学んだうえで
応用として、以下のようなものを作りました。
htmlの<li><li>のソースだけを抜粋すると以下のようになります。
html
1<li><a href="#">基本問題1</a></li> 2<li><a href="#">基本問題2</a></li> 3<li><a href="#">クラスを使った問題</a></li> 4<li><a href="#">有名なアルゴリズム</a></li> 5<li><a href="#">応用問題1</a></li>
しかし、項目を1つ増やし以下のようにすると、図のように次の行に項目が表示されます。
html
1<li><a href="#">基本問題1</a></li> 2<li><a href="#">基本問題2</a></li> 3<li><a href="#">クラスを使った問題</a></li> 4<li><a href="#">有名なアルゴリズム</a></li> 5<li><a href="#">応用問題1</a></li> 6<li><a href="#">応用問題1</a></li>
項目が5つまでだったら右に並んでくれるに項目の個数が5を超えると次の行に移ってしまいます。
項目を次の行に表示するのではなく右に並べるにはどうしたらいいでしょうか?
どなたかご教授お願いします。
一応、html,cssのコードを載せておきます。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.12.0 for Windows"> 5 <meta name="ProgId" content="FrontPage.Editor.Document"> 6 7<link rel="stylesheet" type="text/css" href="css/style.css"> 8<link rel="stylesheet" href="style.css" type="text/css"/> 9 10 <title>数学</title> 11 12 <meta charset="UTF-8"> 13 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 14 </head> 15 <body background="img/nmb004.png"> 16 17 <div class="nav3"> 18 19 <ul class="nl clearFix"> 20 <li><a href="#">基本問題1</a></li> 21 <li><a href="#">基本問題2</a></li> 22 <li><a href="#">クラスを使った問題</a></li> 23 <li><a href="#">有名なアルゴリズム</a></li> 24 <li><a href="#">応用問題1</a></li> 25 <li><a href="#">応用問題2</a></li> 26 27 </div> 28 29 </body> 30</html>
css
1div.nav3 { 2 width: 100%; /* ナビゲーションの幅 */ 3 background: #0000c0 url(img/hor_menu4_back3.gif) repeat-x top; /* ナビゲーションの背景 */ 4 border-top: 1px #000080 solid; /* 上境界線 */ 5 border-bottom: 1px #8080ff solid; /* 下境界線 */ 6 margin: 40px 0; 7 font-size: 85%; 8} 9div.nav3 ul.nl { 10 width: 750px; /* メニューの幅 */ 11 margin: 0 auto; /* センターに配置 */ 12 padding: 0; 13 background: #0000c0 url(img/hor_menu4_back3.gif) repeat-x top; /* メニューの背景 */ 14 border-left: 1px #000080 solid; /* メニューの左境界線 */ 15 border-right: 1px #8080ff solid; /* メニューの右境界線 */ 16 list-style-type: none; 17 text-align: center; 18} 19div.nav3 ul.nl li { 20 width: 20%; /* 項目の幅 */ 21 float: left; 22} 23div.nav3 ul.nl li a { 24 display: block; 25 position: relative; /* IE6用 */ 26 padding: 9px 2px; /* リンクエリアのパディング(上下、左右) */ 27 border-left: 1px #ffffff solid; /* リンクエリアの左境界線 */ 28 border-right: 1px #ffffff solid; /* リンクエリアの右境界線 */ 29 text-decoration: none; /* テキストの下線(なし) */ 30 font-weight: bold; /* 太字 */ 31} 32div.nav3 ul.nl li a:link { 33 color: #ffffaa; 34} 35div.nav3 ul.nl li a:visited { 36 color: #ffffff; 37} 38div.nav3 ul.nl li a:hover { 39 color: #ffff00; 40} 41div.nav3 ul.nl li a:active { 42 color: #ffff00; 43} 44/* --- メニュー3 終了 --- */ 45 46/* --- clearfix --- */ 47.clearFix:after { 48 content: "."; 49 display: block; 50 height: 0; 51 clear: both; 52 visibility: hidden; 53} 54.clearFix { 55 min-height: 1px; 56} 57 58
回答3件
あなたの回答
tips
プレビュー