リストアイテムのインデント量が結構大きく、3階層ぐらい下がると矢鱈と横幅が狭まるのが気になる。
margin-leftで調整を試みたがマイナス値を設定しない限りインデントが軽減されない模様。それだとブラウザ毎に初期値が異なる恐れがあって宜しくないのだけれど、どうすれば良いのか。
positionで親要素の位置を基準に位置決めしたら巧く行くのだろうか。
positionによる位置調整では単に表示位置がずれるだけで幅は変化しなかった。そりゃそうか。
リスト表示テスト。
- 第一段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
- 第二段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
- 第三段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
- 第二段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
間に普通のテキストを挟んで、回り込み解消のチェック。
- 第一段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
- 第二段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
- 第三段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
- 第二段階。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
間に普通のテキストを挟んで、回り込み解消のチェック。
- 定義リスト
- 説明。はじめは□とか・とかを並べていたのだが、ブラウザの処理場の問題か、liの幅を食み出て一行で表示されてしまうので文章に切り替えた。とりあえずここまで。
む？ulとolで右側の空きが異なる。はてなcssの影響?
にしても、なぜolリストの最上位階層だけマーカーが数字にならないんだろう。ul扱いになっているのか?
ここの文も表示されなかったのでソースを見たところ、最上位階層リストのul、ol、dlが正常に閉じられていなかった。次の行を1行空けないと区切りが正しく認識されないらしい。修正をお願いします＞id:hatenadiary皆様。
リストのインデントはmargin-leftで指定できることが判明。
が、ブラウザ側でliの幅を規定してしまうのか、右側の余白が解消できず、思い切ってmarginを0に、liのwidthを指定しfloatで右寄せすることにした。これでやっと思い通りのレイアウトを実現。
新たな問題発生：li右寄せ方式では、何故かリストマークが消える。ul、olの右寄せだとマークが見える代わりに右余白を解消できない。どうすればいいのだ。
