親に1行足すと子が並ぶ
CSSレイアウト入門 / 全 5 枚
変えるのは親、動くのは子
前回リンクを inline-block にしても、メニューは縦に並んだままでした。リンクを包んでいる li が block だからです。子どもを横に並べたいときに指示を出すのは、子ども側ではなく親です。
.site-nav ul {
.site-nav ul書くのは親のほう display: flex;
flex直接の子が横一列になる}
.site-nav ul {
書くのは親のほう
display: flex;
直接の子が横一列になる
}
親が flex コンテナになると、直接の子は全員 flex アイテムになります。もとが block でも inline でも関係なく、既定で左から右へ並びます。
1 / 5
← → キーでも送れます