![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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で質問しましょう!
似たような質問が見つかりました
- システム ホームページの仕組みについて 3 2022/08/16 14:33
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- Evernote Simplenoteのコピー&ペースト 1 2022/05/17 14:09
- Mac OS imac 2012を中古で購入しました。 Apple storeでYouTubeアプリをダウンロード 3 2023/07/24 15:35
- C言語・C++・C# c言語 配列とポインタについて 3 2023/02/09 22:53
- Netflix ネットフリックスの字幕の大きさ変更について 2 2022/10/13 17:14
- iPhone(アイフォーン) iPhoneの設定について サファリなどのブラウザを使っていると、一度アプリを落とした後に開き直すと 4 2022/11/12 18:24
- Mac OS macbook proを購入したのですが、iphone上でsafariやメモを開くだけでpc上に同じ 5 2022/07/22 05:01
- Visual Basic(VBA) VBAでfunctionを利用しようとしたときに「引数は省略できません」というエラーが出ます 1 2022/10/15 16:30
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
テキストボックスの様に文字の...
-
ホームページビルダー 空白の...
-
<legend>で表示されるタイトル...
-
インラインフレームの表示位置...
-
IEでDIV要素のセンタリング...
-
文字を左上に配置したい。
-
HTMLフォームのSELECTの幅を一...
-
IE6にしたらHTMLの表レイアウト...
-
テキストボックスの文字を右揃...
-
docomo携帯サイトのボックスの...
-
インラインフレームのボーダー...
-
ピクセル表示をパーセント表示...
-
なぜ左に寄っているの?
-
文字を揃えたいのです。
-
ホームページ作成初心者
-
「全体のレイアウト:中央揃え...
-
HTMLでテキストエリアをセンタ...
-
1つのサイトに2つの<ol>を使いたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報