float以外で横に並べる方法
要素によって縦に積まれないものもある
例:<a>タグ
ブロックレベル要素と昔言われていたブロック要素(横幅も縦幅も持つ)と、
インライン要素(ライン上に入っている要素)とおおまかにわけて要素は2種類ある
ブロック要素のものを、
見た目だけインラインにするcssがある
li{
display:inline; /*ブロックレベルを見た目だけインライン*/
}
ただ横に並べるだけ
レイアウト的なことはこれはできない
li{
display:inline-block;
}
こうすると両方の性質を持つので一層楽。
ul{
display:flex;
justify-content:space-between;
background-color: #CFF;
}
カラム落ちを防ぐのはこう。
flexboxで調べると色々出てくる
リスト項目に〇とかを付けることもできる
ul{
display:flex;
justify-content:space-between;
background-color:#CFF;
list-style-type:circle;
}
ただし、これとinline要素は組合わすことができない
これをつけると〇がつかない↓
li{
display:inline-block;
}