質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1016閲覧

タグ<li></li>に関する質問です。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/05/15 08:10

こんにちは,
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/15 08:14

ulのwidthやliのwidthを調整してみるなどはしてみたのでしょうか。
guest

回答3

0

ベストアンサー

以下で幅が20%と指定されているからです。
16.66%とか指定すれば、6つ並びになるかと。

div.nav3 ul.nl li { width: 20%; /* 項目の幅 */ float: left; }

今風にするなら、floatでの横並びは止めて、flexを使った方が横並びにアイテム数が増減した時に楽です。

投稿2018/05/15 08:14

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/05/15 08:35

回答ありがとうございます。flexの方も勉強したいと思います。
guest

0

内容見ました。

CSS

1div.nav3 ul.nl li { 2 width: 20%; /* 項目の幅 */ 3 float: left; 4}

この項目、li項目のwidth: 20%が指定されているため100 / 20 = 5(項目)となっています。

投稿2018/05/15 08:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/05/15 08:35

回答ありがとうございます。
guest

0

liに指定された20%は親であるulの幅からの割合ですね。
20%は100%から見れば1/5です。
項目が5つであればちょうど100%になるので幅は維持できますよね。
ulが750pxなのでその20%のliは1つ150px持っていることになります。

今回のように項目が6つになるとliの総幅はulの120%の広さになります。
つまり、項目を増やしたことによる調整がなされていないのでliの総幅は900pxとなります。
親が750pxなのでul>liの関係からはみ出すことはできずに次の段に移動します。
>段落ちした理由

動的なのであれば出力時に都度計算して幅を出すことになるでしょう。
静的なのであれば親幅100%におさまるような幅をliに持たせるとか。
いずれにしても項目数にあわせた調整が必要です。

投稿2018/05/15 08:22

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/05/15 08:36

回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問