
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
解決策をよろしくお願い致します。
No.1ベストアンサー
- 回答日時:
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;]を付ける事によってかなり中央寄りになりましたが、もっとベストな方法がわかれば知りたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
macとwindowsのレイアウト崩れ...
-
text-alignの解除の方法
-
フッターだけが真ん中に行って...
-
<legend>で表示されるタイトル...
-
インラインフレームの表示位置...
-
CSSでh1とその下の文字との行間...
-
<h1>タグの後の行間を詰めたい。
-
エクセルでサイズに合ったもの...
-
Excelの列や行の幅を表示...
-
ワードで「 」(カギかっこ)の...
-
エクセルでサイズ指定でPOP...
-
excel初心者です。 セルの色変...
-
ホームページビルダーで表の列...
-
<tbody>は何のためにあるんでし...
-
ホームページビルダーで横幅に...
-
【ホームページビルダー】表の...
-
表の幅が広がる
-
PDFへてのテキストボックスにて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
text-alignの解除の方法
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
<h1>タグの後の行間を詰めたい。
-
FireFoxで見るとブラウザの幅に...
-
HTMLフォームのSELECTの幅を一...
-
INPUT TEXT内の文字位置を指定...
-
macとwindowsのレイアウト崩れ...
-
インラインフレームの表示位置...
-
chromeだけbody直下に空白が開く
-
htmlのタグ間の謎の空白
-
iPhone用のサイトの文字がずれ...
-
ホームページビルダー 空白の...
-
CSSの設定
-
CSSでh1とその下の文字との行間...
-
外部CSSがFireFoxで反映されません
-
表をページ中央に表示
-
topmarginをネスケで
おすすめ情報