Q&A
画像ように並べたいのですが display: flex;をしても横並びになりません。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta name="format-detection" content="telephone=no"> 8 <link rel="stylesheet" href="./css/reset.css"> 9 <link rel="stylesheet" href="./css/style.css"> 10 <title></title> 11</head> 12<body> 13 <div class="p-all"> 14 <!-- header --> 15 <div class="l-header"> 16 <div class="l-header__inner"> 17 <img src="./img/logo.png" class="p-header__logo"alt="logo"> 18 <div class="c-header__login"> 19 <a href="#"><img src="./img/arrow.white.png" class="c-header__login--arrow" alt="arrow"></a> 20 </div> 21 <a href="#"><p class="c-header__login--txt">ログイン</p></a> 22 </div> 23 <div class="l-header__subttl"> 家族の情報サイト タブルーム</div> 24 </div> 25 26 <!-- main --> 27 <div class="l-main"> 28 <ul class="l-main__menu"> 29 <li class="p-main__menu__list"> 30 <a href="#"> 31 <div class="p-main__menu__listBefore"> 32 <div class="p-main__menu__triangle"></div> 33 </div> 34 <div class="p-main__menu__txt">カテゴリから家具を探す</div> 35 </a> 36 </li> 37 <li class="p-main__menu__list"> 38 <a href="#"> 39 <div class="p-main__menu__listBefore"> 40 <div class="p-main__menu__triangle"></div> 41 </div> 42 <div class="p-main__menu__txt">コーディネートから家具を探す</div> 43 </a> 44 </li> 45 <li class="p-main__menu__list"> 46 <a href="#"> 47 <div class="p-main__menu__listBefore"> 48 <div class="p-main__menu__triangle"></div> 49 </div> 50 <div class="p-main__menu__txt">ブランドから家具を探す</div> 51 </a> 52 </li> 53 <li class="p-main__menu__list"> 54 <a href="#"> 55 <div class="p-main__menu__listBefore"> 56 <div class="p-main__menu__triangle"></div> 57 </div> 58 <div class="p-main__menu__txt">こだわりから家具を探す</div> 59 </a> 60 </li> 61 <li class="p-main__menu__list"> 62 <a href="#"> 63 <div class="p-main__menu__listBefore"> 64 <div class="p-main__menu__triangle"></div> 65 </div> 66 <div class="p-main__menu__txt">家具インテリアショップから家具を探す</div> 67 </a> 68 </li> 69 </ul> 70 </div> 71 </div> 72</body> 73</html>
CSS
1.u-clearfix::after { 2 display: block; 3 clear: both; 4 content: ""; 5} 6 7.p-all{ 8 max-width: 751px; 9 min-width: 320px; 10 margin: 0 auto; 11} 12 13.l-header__inner{ 14 background-color: #d3d3d3; 15 height: 130px; 16 text-align: center; 17 padding-left: 52px; 18} 19 20.c-header__login--txt{ 21 float: right; 22 margin-right: 12px; 23 color: #808000; 24} 25 26.c-header__login{ 27 background-color: red; 28 width: 40px; 29 height: 40px; 30 float: right; 31 border-radius: 5px; 32 margin-right: 12px; 33 margin-top: 65px; 34 color: 35} 36 37.c-header__login--arrow{ 38 height: 20px; 39 width: 20px; 40 padding: 10px; 41} 42 43.l-header__subttl{ 44 background-color: #ddd; 45 height: 20px; 46 text-align: center; 47 padding: 8px 0; 48 font-size: 18px; 49} 50 51.l-main__menu{ 52 53} 54 55.p-main__menu__list{ 56 height: 40px; 57 width: 751px; 58 display: flex; 59} 60 61 62.p-main__menu__listBefore{ 63 height: 30px; 64 width: 30px; 65 background-color: #d3d3d3; 66 border-radius: 5px; 67} 68 69.p-main__menu__triangle{ 70 width: 0; 71 height: 0; 72 border-top: solid 10px transparent; 73 border-right: solid 10px transparent; 74 border-bottom: solid 10px transparent; 75 border-left: solid 10px #fff; 76 margin-left: 10px; 77 78} 79 80.p-main__menu__txt{ 81 color: black; 82} 83
回答1件
0
ベストアンサー
flex は子要素に対して有効になります。
質問のHTMLは、p-main__menu__list の子要素は aタグになります。
横並びにしたいのは、aタグの子要素になりますので、下記のようにaタグにfrexを設定すればいいでしょう。
css
1.p-main__menu__list > a{ 2 height: 40px; 3 width: 751px; 4 display: flex; 5}
投稿2019/11/10 07:58
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。