- ベストアンサー
Listの中に<br>を入れてはダメなのですか？
見映えが良いようにとグレープの後ろに<br>を入れました。 <ul > <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li><a href="grape.html">グレープ</a></li><br> <li><a href="index.html">TOP</a></li> </ul> これで構文チェックをかけたら致命的エラーになりました。 Listの中の<br>ってそんなに罪が重いのですか？
- slime_bess
- お礼率79% (162/203)
- HTML
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
なぜ仕様書読まない!!・・ 反対車線を走ったら法律違反と言われた。「反対車線走行ってそんなに罪が重いのですか？ 」と言われても 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.2 ) <!ELEMENT UL - - (LI)+ -- unordered list --> <!ELEMENT OL - - (LI)+ -- ordered list --> olもulも(LI)+ すなわちLIが一個以上(+) と書いてあり、それ以外は入れられません。 もし存在するとブラウザによって解釈は異なりますが、そこに<li></li>が書き漏らされていると判断して、 <li></l><br> <li></li> ↓ <li></li> <li><br></li> <li></li> と無理やり解釈しなければなりません。当然ブラウザによってこの処理は違う可能性がありますから、表示が異なる結果を招きます。 <div class="nav"> <ul> <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li><a href="grape.html">グレープ</a></li> <li><a href="index.html">TOP</a></li> </ul> </nav> てしたら、 <div class="nav"> <ul> <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li style="margin-bottom:1em;"><a href="grape.html">グレープ</a></li> <li><a href="index.html">TOP</a></li> </ul> </div> とか・・ div.nav ul li:last-child{margin:top:1em;} これだと項目がいくつ増えても最後の項目だけ行間が開く。
その他の回答 (5)
- root8110
- ベストアンサー率30% (6/20)
No.5です。 <li><a href="grape.html">グレープ</a><br></li> は、エラーにならないだけでスペースは空かない。 <br><br>と重ねると空くけど見栄えのために<br>を重ねるのは良くないので、CSSかULを分けるかしてください。
- root8110
- ベストアンサー率30% (6/20)
<li><a href="grape.html">グレープ</a><br></li> と、<li></li>の中に<br>を入れたらエラーにならないはず。 でも、見映え目的ならCSSで指定するのが推奨されます。 また、TOPだけ種類が違うので、TOPだけ別のULにすれば自然と改行も入ってそちらの方がいいかもしれません。
- tracer
- ベストアンサー率41% (255/621)
罪ってわけじゃないけど、単なる文法ミスですね。 <body>の中に<html>が入らないのと同じで、単にそういうルールだからです。
お礼
ご回答有り難うございます。 １０段階で１０がついていたので単なる致命的エラーのようです。
- hitomura
- ベストアンサー率48% (325/664)
「CSS を使ってデザインしてください」と言うだけなのは何なので、実際に1行分の間をあけてみました。 いつもきっちりとした回答をなさる方からは「ちゃんとした HTML を書け」と言われそうだけど、ちゃんとしたものを書いた結果内容が長くなり伝えたいポイントがわかりづらくなるよりも、質問者が知りたい要点だけを伝える最低限のものを書いた方がいいのではという考えでのサンプルなのでご容赦願います。 また質問者様におかれては、これはあくまでも簡易なサンプルで、自身のサイトに使用するにはこれをとっかかりにしていろいろと調べる必要があることをご理解願います。 <html> <head> <style> li:nth-last-child(1) { margin-top:1em; } </style> </head> <body> <ul> <li><a href="apple.html">アップル</a></li> <li><a href="orange.html">オレンジ</a></li> <li><a href="grape.html">グレープ</a></li> <li><a href="index.html">TOP</a></li> </ul> </body> </html>
お礼
ご回答有り難うございます。 サンプルまでつけて頂き助かりました。 nth-last-child(1)という発想は地力では絶対に浮かびません。
- hitomura
- ベストアンサー率48% (325/664)
ul の直下には li しか入れることができません。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul 「見映えが良いように」というのなら CSS を使ってデザインしてください。
お礼
ご回答有り難うございます。やはりダメなんですね。 ＣＳＳを使ってやってみます。
お礼
今日は。エラーの説明らしきものは出たのですが、 よく理解できなかったのでここで質問しました。 お手数をおかけしたようで済みません。 last-childという方法もあるんですね。 やっぱりここで聞いて良かったです。