iPhone用のサイトの文字がずれて困っています。

解決済

質問者：chocho117
質問日時：2010/10/11 01:36
回答数：1件

iPhone用のサイトの文字がずれて困っています。

iPhone用のサイトに設置したグローバルナビゲーションの文字が、
iPhoneのsafariで見ると中央揃えにならず若干左寄りになってしまって困っています。
制作環境はMacOS10.6でDreamweaverを使用しております。PCのsafariでは中央に配置されています。

URLはこちらになります。
html　 http://iymdisk-design.com/test/test.html
css　http://iymdisk-design.com/test/test.css

解決策をよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： metametamu
回答日時：2010/10/12 12:18

cssを変更された後かもしれませんが。

margin-right: 10px;
margin-left: 10px;

この記述を

margin:auto;

にしてやればいけると思います。
もしこれでできないのであれば、ul要素をセンタリングするのではなく、inline-blockを活用してli要素を直にセンタリングするのも一つの手でしょう。

#gnavi ul {
text-align:center;
}
#gnavi li {
display: inline-block;
list-style: none;
}
#gnavi ul li a {
height: 1.8em;
width: 56px;
line-height: 1.8em;
color: #426866;
text-decoration: none;
background: #ffffff;
font-size: 10px;
text-align: center;
display: block;
border-left: 1px solid #222;
}
#gnavi ul #nTop a {
border-left-style: none;
}

この回答への補足

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

<body>に対して<ul>全体が左寄りではなく、<li>の横幅に対して＜a>の文字がiPhoneのsafariで見ると左寄りになってしまうという問題です。
説明がわかりづらく大変申し訳ありませんでした。
その後[#gnavi ul li a ]に[letter-spacing:-1.3px;]を付ける事によってかなり中央寄りになりましたが、もっとベストな方法がわかれば知りたいと思います。

補足日時：2010/10/17 15:44

通報する