Q&A
おはようございます。
下のようなメニュー欄をつくっているのですが、
html
1<nav> 2 <ul id="menu"> 3 <li class="menu_list" style="border-right:5px #fff solid;">menu1</li> 4 <li class="menu_list" style="border-right:5px #fff solid;">menu2</li> 5 </ul> 6 </nav>
css
1nav{ 2 margin:0; 3 width:100%; 4 height:50px; 5 background:#002c4d; 6} 7 8#menu{ 9 margin:0 auto; 10 padding:0; 11 width:650px; 12 height: 50px; 13 background:skyblue; 14} 15 16.menu_list{ 17 display:inline-block; 18 margin-left:0; 19 margin-right:0; 20 width:200px; 21 height:50px; 22 text-align: center; 23 line-height: 50px; 24 font-size: 20px; 25 font-weight: bold; 26 background:red; 27}
なぜか白いボーダーの右側に謎の空白ができてしまいます。listにmarginやpaddingに0を設定しても解決せず、どうして良いかわかりません。
詰めるにはどうしたら良いか教えて下さい。よろしくお願いいたします！
回答2件
0
ベストアンサー
念のため
inline-blockでも親要素の#menuにfont-size: 0;の指定をすれば隙間なくなりますよ！
投稿2015/11/23 13:12
退会済みユーザー
総合スコア0
0
.menu_listタグのdisplayをinline-blockからblockにすればできました！
失礼いたしました。
投稿2015/11/23 02:50
総合スコア379
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。