ol要素の番号とリスト項目の離れについて

質問

最近HPを作り始めた素人です。

DWでol要素を使って順序つきの項目リストを作っております。
DWのデザインウィンドウとIEだとちゃんとリスト項目の行頭に番号が表示されるのですが、Google Chromeで閲覧すると番号とリスト項目が離れて表示されてしまいます。 (番号は左寄り、項目は中央です。)

例
<ol>
<li>アメリカ</li>
<li>フランス</li>
<li>イギリス</li>
</ol>

IE
　　　　　　　1. アメリカ
　　　　　　　2. フランス
　　　　　　　3. イギリス

Chrome
1. 　　　　　　　　　　　　　　　　　　　　　　　　　　　アメリカ
2.　　　　　　　　　　　　　　　　　　　 　　　　　　　　フランス
3. 　　　　　　　　　　　　　　　　　　　　　　　　　　　イギリス

因みにこのol要素をdiv　idで囲んでいてText-alignをcenterにしております。

単純な間違いだとは思うのですが、知識不足のため分かりません。
恐れ入りますが、どなたかご教授お願いいたします。

回答No.2

ORUKA1951

もしされたいことが、
<ol>
　<li>あいうえお</li>
　<li>かきくけこさし</li>
　<li>すせそ</li>
</ol>
を
|　　　1.あいうえお　　　|
|　　2.かきくけこさし　　|
|　　　　3.すせそ　　　　|
とされたいのでしたら
＞list-itemの幅を指定してdisplay:inline-blockにしたら番号だけが消えてしまいました。
　ではなくて、

ol{
counter-reset:counter;/* counterカウンターリセット */
width:20em;/* 幅きめ */
background-color:yellow;
text-align:center;/* 中央 */
}
ol li{
display:inline;/* inline */
margin:0 auto;
background-color:aqua;
}
ol li:before{
content: counter(counter) ". ";/* 内容の追加 */
counter-increment: counter;/* カウンターの加算 */
}
ol li:after{
content:"\A";/* 内容(改行コード)の追加 */
white-space:pre;/* 改行を有効に */
}
になります。

分かりやすいように色付けしてます。

回答No.1

ORUKA1951

text-alignが指定されると、その内容はwidthの中央に配置されます。
　ここで、外見は同じになりますが、リストの左右のpadding,marginはブラウザによってデフォルトの指定が異なります。
ul＿＿＿＿＿＿
|　　　　　　
|ulのpaddig　li
|
ul＿＿＿＿＿＿
|　　　　　　
|liのmargin　li
|
　また、リストマークをどこに置くかも差があります。

項目(list-item)の内容の直前に置くもの
　IE,firefox
項目(list-item)のブロックの直前に置くもの
　Opera,Chrome,Safari

　解決策としては、list-itemの幅を指定して、display:inline-blockとして、その内部ではtext-align:left;が良いでしょう。

お礼

ご回答して頂き、ありがとうございます。

list-itemの幅を指定してdisplay:inline-blockにしたら番号だけが消えてしまいました。そこでdisplay:inline-blockはしないでlist-itemの幅だけを指定してみたら、数字がセンター寄りになりだいぶ見やすくなったのでこれでいこうと思います。

ブラウザーごとにリストマークを置く位置に差があるとは知らなかったので大変勉強になりました。
本当にありがとうございます。