横並び
INDEX
flex1
A
説明など
B
親要素にdisplay: flex;を指定しています。
説明のPもDIVでくくっているのはPを追加しても下へ並ぶようにするため
プレビューでは横並びになります。
C
.box1{
display: flex;
}
box1にはdisplay: flex;だけを入れています、ビルダーでは表示されない・・
box1aのdivに上に0.5remのmarginを入れています。
flax2
- 1つめの項目
- 2つめの項目
- 3つめの項目
- 4つめの項目
- 5つめの項目
- 6つめの項目
- 7つめの項目
- 8つめの項目
- 9つめの項目
- 10つめの項目
float01
リストのulは記号のリスト初期値は黒丸、olは番号付きリスト、項目はどちらもli
リストの記号を消すのはulにstyle="list-style-type : none;
- 1つめの項目
- 2つめの項目
- 3つめの項目
親要素にafterでclear:both;を指定してるのでこのPは回り込みしません。でもこの上下の隙間は・・・
.float01::after {
content: "";
display: block;
clear: both;
}
- 1つめの項目
- 2つめの項目
- 3つめの項目
このPにclear:both;を指定してるのでこのPは回り込みしません。
- 上下にmargin
- 幅に10rem
- 3つめの項目
- 4つめの項目
- 5つめの項目
- 6つめの項目
- 7つめの項目
このPにclear:both;を指定してるのでこのPは回り込みしません。
liでサイズを指定してaで100％display：block
上はinline-tableを使っていますが、これは使用しない。
more