Q&A
スマホ向けは作ったことがないことに加え、自分も初心者ですのでここで発言させて頂きます。
33%にしても横に並ばないのはpadding: 5px;で99%+15pxとなり100％を超えてるせいかと
1,2%下げれば一応横にはなると思います。
また、一定間隔で横に並べたいのであればflexやfloatを使った方がいいかもしれないです。
いつもお世話になっております。
スマホ向のサイトを作成するにあたり、アイコンが横一列に並ぶボトムナビゲーションなるものを作ろうと検索し、以下のサイトを見つけました。
https://pecopla.net/web-column/bottom-navigation
そして、見よう見まねにて、以下のようなコードを作成しました。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet"> 5</head> 6<body> 7 8<ul class="menu"> 9<li> 10<a href="#"><i class="fa-solid fa-bars"></i><br> 11<span>ホーム</span></a> 12</li> 13<li> 14<a href="#"><i class="fa-solid fa-arrow-left"></i><br> 15<span>うしろ</span></a> 16</li> 17<li> 18<a href="#"><i class="fa-solid fa-arrow-right"></i><br> 19<span>まえ</span></a> 20</li> 21</ul> 22 23</BODY> 24 25<style> 26.menu { 27position: fixed; 28left:0; 29bottom:0; 30background:white; 31width: 100%; 32} 33.menu li { 34display:table; 35table-layout:fixed; 36width:100%; 37padding: 5px; 38list-style:none; 39text-align:center; 40} 41.menu a span { 42display: block; 43font-size: 4px; 44} 45</style> 46 47</HTML> 48
すると、以下の画像のように、アイコンが縦に並んでしまいます。
.menu liの部分が『リストを表として扱い、横方向にきっちり並べる』という意味だと思いますが、横方向に並びません。
liのwidthを33％にしても横に並びません。
コードの過不足をご指摘頂きたく存じます。
以上、何卒宜しくお願い申し上げます。
回答有難うございます。
.menu liの中のwidthを30％としてみましたが、変わらず縦に並びます。flexやfloatはデザイン崩れの元凶だとwebに書いてありましたので使用は避けたいですが、flexやfloatについても試してみようと思います。
回答1件
0
ベストアンサー
①display:tableの使い方は、横並びにしたい要素の親要素にdisplay:tableを指定し、横並びにしたい要素にdisplay:table-cellを指定して使います。
②横並びにしたい要素のwidthを100%にすると親要素と同じ幅になってしまい、1つの要素だけで幅が埋まるので横並びになりません。
よって、以下のように変更すれば横並びになります。
CSS
1.menu { 2display:table; 3table-layout:fixed; 4position: fixed; 5left:0; 6bottom:0; 7background:white; 8width: 100%; 9} 10.menu li { 11display:table-cell; 12padding: 5px; 13list-style:none; 14text-align:center; 15}
投稿2023/01/10 13:00
総合スコア125
ご指摘有難うございます。
仰いますようにコードを修正しました所、見事に横に並びました。誠に有難うございました。
そのまま直したところ、メニューが幅に均等に並ばなかったので、以下の通り、left:0;をright:0;と修正し、均等に横に並ぶメニューとすることができました。
<style>
.menu {
display:table;
table-layout:fixed;
position: fixed;
right:0;
bottom:0;
background:white;
width: 100%;
}
.menu li {
display:table-cell;
padding: 5px;
list-style:none;
text-align:center;
}
.menu a span {
display: block;
font-size: 4px;
}
</style>
この知識が、後へ続く皆様の道標となりますように…。
あなたの回答
tips
プレビュー
