リストの入れ子について

質問

初歩的な質問で済みません。次のようなリストにしたいのですがどの様なソースにすれば実現可能でしょうか？

１．項目
　・箇条書きＡＡＡＡＡ
　・箇条書きＢＢＢＢＢ
　・箇条書きＣＣＣＣＣ

２．項目
　・箇条書きＡＡＡＡＡ
　・箇条書きＢＢＢＢＢ
　・箇条書きＣＣＣＣＣ

↓これで良いのかと思ってるんですが「箇条書きＡＡＡＡＡ」等が大分右にずれてしまうんです。「箇条書き」のところをもう少し左にもってこれないでしょうか？

<ol>
<li>項目
<ul>
<li>箇条書きＡＡＡＡＡ</li>
<li>箇条書きＢＢＢＢＢ</li>
</ul>
</li>
<li>項目
<ul>
<li>箇条書きＡＡＡＡＡ</li>
<li>箇条書きＢＢＢＢＢ</li>
</ul>
</li>
</ol>

あと、「１．」と「項目」や「・」と「項目」の間隔は調整は可能でしょうか？

よろしくお願いします。

回答No.2

345itati · ベストアンサー

CSSで余白を調節
<style type="text/css">
<!--
.hidari {
margin-left: 0px;
padding-left: 0px;
}
-->
</style>
HTML部分
<ol>
<li>項目
<ul class="hidari">
<li>箇条書きＡＡＡＡＡ</li>
<li>箇条書きＢＢＢＢＢ</li>
</ul>
</li>
<li>項目
<ul>
<li>箇条書きＡＡＡＡＡ</li>
<li>箇条書きＢＢＢＢＢ</li>
</ul>
</li>
</ol>

マーカーの位置と基本ボックスの間隔を調節するにはmarker-offsetプロパティがありますが、残念ながらほとんどのブラウザが対応していないようです(使えないという意味
→http://www.nextindex.net/web/CSS/list.html

お礼

345itatiさん、ありがとうございます。

早速試してみます！

回答No.3

key-child

li要素にpaddingを設定すれば調節できます。

<style type="text/css">
<!--

ul {
padding-left: 1em;
}
ul li {
padding-left: 2em;
}

-->
</style>

お礼

key-childさん
ありがとうございます。

勉強になりました。

回答No.1

dezimac

見た目の調整はスタイルシートで行います。

例）上右下左の順番で、0,0,0,1文字の間隔を空ける
<style>
<!--
ol {padding: 0px 0px 0px 1em;}
ul {padding: 0px 0px 0px 1em;}
-->
</style>

http://www.tohoho-web.com/css/index.htm

>「１．」と「項目」や「・」と「項目」の間隔は
基本的に無理です。

お礼

dezimacさん、ありがとうございます。

よく理解出来ました。