Q&A
画像のようにしたいのですがp-main__menu__listの高さを調整しても重なってしまいます。
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"> 家族の情報サイト タブルーム</p> 24 </div> 25 </div> 26 <!-- main --> 27 <div class="l-main"> 28 29 <ul class="l-main__menu u-clearfix"> 30 <li class="p-main__menu__list"> 31 <a href="#"> 32 <div class="p-main__menu__listBefore"> 33 <div class="p-main__menu__triangle"></div> 34 </div> 35 <p class="p-main__menu__txt">カテゴリから家具を探す</p> 36 </a> 37 </li> 38 <li class="p-main__menu__list"> 39 <a href="#"> 40 <div class="p-main__menu__listBefore"> 41 <div class="p-main__menu__triangle"></div> 42 </div> 43 <p class="p-main__menu__txt">コーディネートから家具を探す</p> 44 </a> 45 </li> 46 <li class="p-main__menu__list"> 47 <a href="#"> 48 <div class="p-main__menu__listBefore"> 49 <div class="p-main__menu__triangle"></div> 50 </div> 51 <p class="p-main__menu__txt">ブランドから家具を探す</p> 52 </a> 53 </li> 54 <li class="p-main__menu__list"> 55 <a href="#"> 56 <div class="p-main__menu__listBefore"> 57 <div class="p-main__menu__triangle"></div> 58 </div> 59 <p class="p-main__menu__txt">こだわりから家具を探す</p> 60 </a> 61 </li> 62 <li class="p-main__menu__list"> 63 <a href="#"> 64 <div class="p-main__menu__listBefore"> 65 <div class="p-main__menu__triangle"></div> 66 </div> 67 <p class="p-main__menu__txt">家具インテリアショップから家具を探す</p> 68 </a> 69 </li> 70 </ul> 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} 58 59 60.p-main__menu__listBefore{ 61 height: 30px; 62 width: 30px; 63 background-color: #d3d3d3; 64 border-radius: 5px; 65} 66 67.p-main__menu__triangle{ 68 width: 0; 69 height: 0; 70 border-top: solid 10px transparent; 71 border-right: solid 10px transparent; 72 border-bottom: solid 10px transparent; 73 border-left: solid 10px #fff; 74 margin-left: 10px; 75} 76 77.p-main__menu__txt{ 78 79}
回答1件
0
margin 等は調整してみてください。
CSS
1.p-main__menu__list a { 2 display: flex; 3 align-items: center; 4}
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout
投稿2019/11/12 04:42
総合スコア13749
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。