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;
}