スマホサイトのメニューを作成しようとしています。
全部画像で6x2の12ボタンです。
(ソースは後で記入します。)
この状態で、以下の問題があります。
1.リストを2行にしたため間に余白が入ってしまう。
2.スマホサイトなのでレスポンシブ化したいんですけど、画像サイズをパーセント表示(100÷6=16%)にすると、余白なしどころかもっと小さくなってしまう。
この2点をどうにか解決できないでしょうか?
以下ソースです。
＜div class="top_m">
＜ul class=menu>
＜li>＜a href="#ca01" class="scroll">＜img src="c01.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca02" class="scroll">＜img src="c02.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca03" class="scroll">＜img src="c03.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca04" class="scroll">＜img src="c04.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca05" class="scroll">＜img src="c05.png" width="107" height="107"/>＜/a>＜/li>
＜li>＜a href="#ca06" class="scroll">＜img src="c06.png" width="105" height="107"/>＜/a>＜/li>
＜br clear="all" />
＜li>＜a href="#ca07" class="scroll">＜img src="c07.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca08" class="scroll">＜img src="c08.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca09" class="scroll">＜img src="c09.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca10" class="scroll">＜img src="c10.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca11" class="scroll">＜img src="c11.png" width="107" height="106"/>＜/a>＜/li>
＜li>＜a href="#ca12" class="scroll">＜img src="c12.png" width="105" height="106"/>＜/a>＜/li>
＜/ul>
＜script>
$(function() {
$(".scroll").click(function(event){
event.preventDefault();
var url = this.href;
var parts = url.split("#");
var target = parts[1];
var target_offset = $("#"+target).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top}, 1500);
});
});
＜/script>
■CSS
.top_m {
display: block;
position: fixed;
width: 100%;
z-index: 1000;
padding:0;
margin:0;
}
.top_m ul{list-style:none;
padding:0;
margin:0;
}
.top_m li{float: left;
padding:0;
margin:0;
}
No.1
4974
2154
こんな感じでどうでしょう（変更点だけ抜粋）。
<div class="top_m"> <ul class=menu> <!-- ★ img から width と height を削除 --> <li><a href="#ca01" class="scroll"><img src="c01.png" /></a></li> ... </ul> </div> <style> ... .top_m li { float: left; padding:0; margin:0; line-height: 0; /* ★ LI の line-height をゼロに */ } .menu img { width: 16vw; /* ★ 幅の単位は vw で */ } </style>
No.1
49742154
ここでベストアンサー
こんな感じでどうでしょう（変更点だけ抜粋）。
<div class="top_m"> <ul class=menu> <!-- ★ img から width と height を削除 --> <li><a href="#ca01" class="scroll"><img src="c01.png" /></a></li> ... </ul> </div> <style> ... .top_m li { float: left; padding:0; margin:0; line-height: 0; /* ★ LI の line-height をゼロに */ } .menu img { width: 16vw; /* ★ 幅の単位は vw で */ } </style>
返答ありがとうございます!
line-heightを0にするのと、単位をvwですね!
1
1
1
1
1
18
1
返答ありがとうございます!
2016/07/22 11:56:16line-heightを0にするのと、単位をvwですね!