
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】Firefoxで見るとborder-...
-
aタグに直接style=""で:hoverを...
-
端から端まで横線を引きたい
-
CSSのtransform: translate(-50...
-
text-alignの解除の方法
-
htmlのタグで・・・
-
エクセルでサイズ指定でPOP...
-
Excelの列や行の幅を表示...
-
エクセルでサイズに合ったもの...
-
ワードで「 」(カギかっこ)の...
-
昼間 ずっとゴロゴロと横になっ...
-
ホームページビルダーで、画面...
-
道路幅を調べたいのですが
-
htmlでテーブル内にテキストボ...
-
HTMLでクロス抽出したい
-
バーコードのサイズは拡大縮小...
-
excel初心者です。 セルの色変...
-
表の幅が広がる
-
GIMPについて質問
-
PDFへてのテキストボックスにて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
text-alignの解除の方法
-
なぜ左に寄っているの?
-
<h1>タグの後の行間を詰めたい。
-
端から端まで横線を引きたい
-
インラインフレームの表示位置...
-
macとwindowsのレイアウト崩れ...
-
CSSでh1とその下の文字との行間...
-
chromeだけbody直下に空白が開く
-
INPUT TEXT内の文字位置を指定...
-
CSSについて
-
スクロールバーの色変更(長文)
-
リストの「・」をセンタリング...
-
SEO対策について-<h1>タグ-そ...
-
CSSにてコンテンツを中央へ寄せ...
-
ポインタがリンクの上に乗ると...
-
CSSレイアウトの本当の正しいや...
-
枠の固定
-
<pre>で折り返させる方法を教え...
おすすめ情報