Q&A
>自分で検証モードをみていろいろいじってみたのですが、
どういじってみたのか覚えている限りでいいので列挙してください。
調べたこと試したことは書いてないと伝わりません。
現状、テキストが下の方に偏ってしまっています。
自分で検証モードをみていろいろいじってみたのですが、うまく出来ませんでした。
回答よろしくお願いします。
【試したこと】
.menu ul aに
line-hight:60pxを付与したり、vertical-align:middle;を付与したりを試してみました。
* { margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: 'Roboto', sans-serif; } .menu-container { background: #FDECE6; height:60px; a { color:black; } .menu-ttl a{ font-size: 18px; font-weight: bold; } .menu-ttl i{ margin-left:20px; } } .menu-mobile { display: none; padding: 20px; &:after { content: "\f394"; font-family: "Ionicons"; font-size: 2.5rem; padding: 0; float: right; position: relative; top: 50%; transform: translateY(-25%); } } .menu-dropdown-icon { &:before { content: "\f489"; font-family: "Ionicons"; display: none; cursor: pointer; float: right; padding: 1.5em 2em; background: #fff; color: #333; } } .menu { max-width:1140px; margin:0 auto; > ul { display: flex; justify-content: space-between; margin: 0 auto; width: 100%; list-style: none; padding: 0; position: relative; //position: relative; /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; &:before, &:after { content: ""; display: table; } &:after { clear: both; } > li { float: left; background: #FDECE6; padding: 0; margin: 0; a { text-decoration: none; padding: 1.5em 3em; display: block; height:60px; } &:hover { background: #FDECE6; } > ul { display: none; width: 100%; background: #FDECE6; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; &:before, &:after { content: ""; display: table; } &:after { clear: both; } > li { margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left; a { color: #777; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #ccc; } > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; &:before, &:after { content: ""; display: table; } &:after { clear: both; } > li { float: left; width: 100%; padding: 10px 0; margin: 0; font-size: .8em; a { border: 0; } } } } &.normal-sub { width: 300px; left: auto; padding: 10px 20px; > li { width: 100%; a { border: 0; padding: 1em 0; } } } } } } }
<section class="nav"> <div class="menu-container"> <div class="menu"> <ul> <li class="menu-ttl"><a href="#">代理店を探す<i class="fas fa-angle-down"></i></a></li> <li class="menu-ttl"><a href="#">よく分かる代理店の見つけ方<i class="fas fa-angle-down"></i></a> <ul> <li><a href="#">目的・テーマから探す</a> <ul> <li><a href="#">初期コストを抑えたい！初期コスト0円の代理店</a></li> <li><a href="#">急ぎでも安心！即出稿OK！</a></li> <li><a href="#">月額30万円以下の安い代理店</a></li> <li><a href="#">いずれは自社で！インハウス化支援の代理店</a></li> </ul> </li> <li><a href="#">こだわり・特徴から探す</a> <ul> <li><a href="#">実績開示されている代理店</a></li> <li><a href="#">対面で会議に出席可能な代理店</a></li> <li><a href="#">リモート可能な代理店</a></li> </ul> </li> <li><a href="#">公式認定資格から探す</a> <ul> <li><a href="#">Google認定資格リスティング認定資格を持つ代理店</a></li> <li><a href="#">Yahoo認定資格を持つ代理店</a></li> <li><a href="#">FaceBook認定資格を持つ代理店</a></li> <li><a href="#">Instagram認定資格を持つ代理店</a></li> </ul> </li> </ul> </li> <li class="menu-ttl"><a href="#">業界別で探す<i class="fas fa-angle-down"></i></a> <ul> <li><a href="#">コンサルティング</a> <ul> <li><a href="#">個人事務所(弁護士・税理士・会計士)</a></li> <li><a href="#">コーチング</a></li> <li><a href="#">起業家支援</a></li> </ul> </li> <li><a href="#">ファッション</a> <ul> <li><a href="#">アパレル</a></li> <li><a href="#">美容・整形</a></li> </ul> </li> <li><a href="#">メーカー</a> <ul> <li><a href="#">住宅・不動産</a></li> <li><a href="#">日用品</a></li> <li><a href="#">環境エネルギー</a></li> <li><a href="#">エンジニアリング</a></li> </ul> </li> </ul> </li> <li class="menu-ttl"><a href="#">悩みから探す<i class="fas fa-angle-down"></i></a> <ul> <li><a href="#">代理店を乗り換えたい</a> <ul> <li><a href="#">レポートが何を書いてるのか分からない</a></li> <li><a href="#">売上が全然伸びない</a></li> <li><a href="#">担当から連絡が来ない</a></li> </ul> </li> <li><a href="#">KPIを伸ばしたい</a> <ul> <li><a href="#">サイトのPV数を伸ばしたい</a></li> <li><a href="#">学生を採用したい</a></li> <li><a href="#">人材を確保したい</a></li> <li><a href="#">売上を伸ばしたい</a></li> </ul> </li> <li><a href="#">目に見えない悩み</a> <ul> <li><a href="#">認知度をあげたい</a></li> <li><a href="#">多角的にマーケティングしたい</a></li> <li><a href="#">ブランド力を向上させたい</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </section>
回答1件
0
自己解決
paddingを消して、line-hightをhightと同じ高さにしたらうまくいきました。
投稿2020/09/04 15:21
総合スコア95
あなたの回答
tips
プレビュー
