liタグを隙間なく敷き詰める平成30年 10月 8日 作成
概略
liタグを隙間なく敷き詰めたい場面がでてきた為、その実現方法を調査する。
手段
liタグのrightとbottomに対してネガティブマージンを設定する事で可能。
実装方法
HTML
<ul> <li><a href="#_">テキスト 01</a></li> <li><a href="#_">テキスト 02</a></li> <li><a href="#_">テキスト 03</a></li> <li><a href="#_">テキスト 04</a></li> <li><a href="#_">テキスト 05</a></li> <li><a href="#_">テキスト 06</a></li> <li><a href="#_">テキスト 07</a></li> <li><a href="#_">テキスト 08</a></li> <li><a href="#_">テキスト 09</a></li> <li><a href="#_">テキスト 10</a></li> <li><a href="#_">テキスト 11</a></li> <li><a href="#_">テキスト 12</a></li> <li><a href="#_">テキスト 13</a></li> <li><a href="#_">テキスト 14</a></li> <li><a href="#_">テキスト 15</a></li> </ul>
CSS
ul {
width: 100%;
height: auto;
overflow: hidden;
padding-bottom: 0.1rem;
}
ul li {
font-size: 1.2rem;
margin: 0 0 -0.1rem -0.1rem;
border: 0.1rem solid #C3C3C3;
float: left;
}
ul li:hover {
background-color: #FF704F;
}
ul li a {
display: block;
line-height: 2.6rem;
padding: 0 1rem;
text-decoration: none;
}
デモ
考察
liタグのrightとbottomに対してネガティブマージンを-0.1remずつ設定すれば隣接するliタグ同士が重なり、隙間が無いように見える。
「float: left」で「display: inline-block;」はNG。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「5年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
