忍者ブログ

からすまる日誌

20191106_pm02 display:inline-block;

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

20191106_pm02 display:inline-block;

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

コメント

ブログ内検索

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31