忍者ブログ

からすまる日誌 css

授業noteからcss部分を抜粋

序章(13) display:inline-block; ブロック要素をインライン要素に

×

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

序章(13) 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

コメント

ただいまコメントを受けつけておりません。