質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

1190閲覧

グローバルナビの二列目での隙間について スマホ用

okkunn

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/21 08:28

スマホで表示したときに二列目の左右に隙間ができてしまいます。
どうしてでしょうか。

html

1!doctype html> 2<html> 3<head> 4<meta name="msvalidate.01" content="05750DC7F0199B7F83D0C41AB8472521" /> 5<meta charset="UTF-8"> 6<!--スマホ用設定--> 7<!-- ビューポートの設定 --> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9<link rel="stylesheet" href="css/responsive_style.css" media="all"> 10<script src="java/jquery-3.2.1.min.js"></script> 11<script src="java/script.js"></script> 12</head> 13<body> 14<div class="wrapper"> 15<div class="newmenu"> 16 <ul id="global"> 17 <li><a href="index.html">AAAAA</a></li> 18 <li>BBBBBB 19 <ul id="tisiki"> 20 <li><a href="studying.html">AAAAAAA</a></li> 21 <li><a href="matome.html">AAAAAAA</a></li> 22 <li><a href="friends.html">AAAAAAA</a></li> 23 <li><a href="books.html">AAAAAAAA</a></li> 24 <li><a href="colleges.html">AAAAAAAA</a></li> 25 <li><a href="failure.html">AAAAAAA</a></li> 26 </ul> 27 </li> 28 <li>CCCCCCC 29 <ul id="tequnic"> 30 <li><a href="test.html">BBBBBB</a></li> 31 <li><a href="schedule.html">BBBBBBB</a></li> 32 <li><a href="motivation.html">BBBBBBB</a></li> 33 <li><a href="colleges7.html">BBBBBBB</a></li> 34 <li><a href="memory.html">BBBBBB</a></li> 35 </ul> 36 </li> 37 <li>DDDDDD 38 <ul id="info"> 39 <li><a href="playing.html">CCCCCCC</a></li> 40 </ul> 41 </li> 42 </ul> 43</div><!--newmenuここまで--> 44<div><!--wrapperここまで--> 45</body>

css

1.newmenu{ 2 padding:0 0 0 0 ; 3 margin:0 0 0 0; 4 font-size:0; 5} 6.newmenu ul li{ 7 list-style-type:none; 8 text-align:center; 9 float:left; 10 width:50%; 11 font-size:12px; 12 padding:0 0 0 0; 13 margin:0 0 0 0; 14 color:#ffffff; 15 background-color:#191970; 16} 17.newmenu ul li a{ 18 color:#ffffff; 19 text-decoration:none; 20 display:block; 21 padding:0 0 0 0 ; 22 margin:0 0 0 0; 23 box-sizing:border-box; 24} 25

java

1$(function() { 2 init_menu(); 3}); 4 5function init_menu(){ 6 7 $('#global> li').hover( 8 function(){ 9 $(this).find('ul').slideDown(200); 10 }, 11 function(){ 12 $(this).find('ul').hide(); 13 } 14 );} 15

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/05/21 09:07

スマホ用のCSSの記述などは無いのでしょうか。
guest

回答2

0

コード見てないからテキトーだけど、よくあるケースだとliの間のおかしなスペースは、liタグとliタグを改行せずに繋げると消える。改行コードが悪さしてた気がした。

投稿2017/05/21 11:38

編集2017/05/21 11:50
harashow1701

総合スコア854

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

すみません、コードをコピペしてみましたが二列目の左右に隙間とはどの部分ですか?
そもそもこの画面表示であってますでしょうか?

投稿2017/05/21 11:29

編集2017/05/21 11:30
saitouakihiro

総合スコア85

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問