親要素liと子要素aを綺麗に均等に並べたいが、余白の設定がうまくいかない。

aタグに高さを持たせて、枠全体にリンクを貼るため、paddingを設定しました。
親要素のliには設定していません。

ただ、そうすると、余白が変なことになり（＝aでリンクを設定してあるところだけ余白が生まれるから）
均等にメニューが並びません。

かといって、親のliに同じpaddingを設定しなおすと、枠全体にリンクが反映されず、テキストだけになってしまいます。

さらに、親と子に両方同じpaddingを設定すると、合計値のようなことになり、さらにpaddingが広がって変なことになってしまいます。

この場合どうすれば均等に、そして、リンクは変わらず枠全体に設定するようにできるのでしょうか？

コードを貼ります。どうぞよろしくお願い致します。

html
1<ul class="h-menu">
2            <li class="h-list">
3                <a href="#">あいうえお</a>
4            </li>
5        
6            <li class="h-list">
7                かきくけこ
8            </li>
9
10            <li class="h-list">
11                <a href="#">さしすせ</a>
12            </li>
13
14            <li class="h-list">
15                たちつてとなにぬ
16            </li>
17
18            <li class="h-list">
19                なにぬね
20            </li>
21
22            <li class="h-list">
23                <a href="#">はひふへ</a>
24            </li>
25
26            <li class="h-list">
27                <a href="#">まみむめもやゆ</a>
28            </li>
29
30        </ul>

css
1.h-menu{
2    display: flex;
3    align-items: center;
4}
5
6
7.h-list{
8    display: inline-block;
9    font-weight: bold;
10    text-decoration: none;
11    position: relative;
12    
13}
14
15.h-list a{
16    color: #333;
17    text-decoration: none;
18    padding: 23px 18px 23px 23px; 
19    display: block;   
20}
21
22.h-list:last-child { 
23  background: #2498b3;
24  list-style: none;
25  font-weight: bold;
26  text-decoration: none;
27}
28
29.h-list:last-child a {
30  color:#fff;
31  }
32
33
34ul {
35    list-style: none;
36  }
37
38.a {
39  background:#E9F8FB;
40}
41

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLを変更してもいいのなら、aタグでないli要素の中身を <span> で囲んでそれに余白(padding)を設定すればいいでしょう。

html
1<ul class="h-menu">
2  <li class="h-list">
3    <a href="#">あいうえお</a>
4  </li>
5  <li class="h-list">
6  <span>かきくけこ</span>
7  </li>
8  <li class="h-list">
9    <a href="#">さしすせ</a>
10  </li>
11  <li class="h-list">
12    <span>たちつてとなにぬ</span>
13  </li>
14  <li class="h-list">
15    <span>なにぬね</span>
16  </li>
17  <li class="h-list">
18    <a href="#">はひふへ</a>
19  </li>
20  <li class="h-list">
21    <a href="#">まみむめもやゆ</a>
22  </li>
23</ul>

css
1.h-list span{
2    padding: 23px 18px 23px 23px; 
3    display: block;   
4}

CodePenサンプル

HTMLの変更が不可なら、
li要素にpaddingを設定して、aの疑似要素を親要素のサイズまで拡張するという方法でどうでしょう。

css
1.h-list{
2  padding: 23px 18px 23px 23px; 
3  position: relative;
4}
5.h-list a{
6  color: #333;
7  text-decoration: none;
8}
9.h-list a::before {
10  content: "";
11  position: absolute;
12  display: block;
13  top:0;
14  bottom: 0;
15  left: 0;
16  right: 0;
17}

投稿2021/06/13 07:03

総合スコア34075

2021/06/14 13:07

teratail側のサーバーエラーで質問できませんでした・・・。遅くなりました・・・。第1案のほうやってみましたが、文字がなぜか小さくなってしまいました。なぜなのでしょうか？さらに、均等な余白になりません・・・。それら７つのメニューを均等の余白にしたいのです・・・。また、spanタグにpaddingを設定しましたが、li とaのほうはどうするのでしょうか？display:blockなどについても教えて下さい。

hatena19

2021/06/14 13:27

回答にサンプルのリンクを追加しておきましたので確認ください。サンプルとご自身のコードを見比べて原因を探してみてください。どうしても分からなければ現象が再現できるコードを提示してください。

B_J

2021/06/14 14:03

感動です。ほんとうにありがとうございます。擬似要素の方にしようと思いますが、難しいですね。ちょっと擬似要素の分かりやすい勉強サイトなどあれば教えて下さい。そして、全体としてもう少し右側に移動して、もう少し余白を少なくしたいのですが、余白はpaddingをいじればいいと思うのですが、全体としてもう少し右側に移動するにはどうしたらいいのでしょう？

B_J

2021/06/14 14:07

それから、教えて頂いた擬似要素はどのようなことをやったということなのでしょうか？ググって自分でも調べたりしたいのですがキーワードなどが擬似要素以外で分かりません。、教えて下さい。

B_J

2021/06/14 14:38

ごめんなさい、全体的に右に移動するのも余白で出来ましたね。

hatena19

2021/06/14 23:49

疑似要素自体については、下記の公式ドキュメントで確認してください。 https://developer.mozilla.org/ja/docs/Web/CSS/::before やっていることは、親の .h-list に position: relative; を指定してこれを基準ブロックにします。 aタグのbefore疑似要素を position: absolute; を設定して上の基準ブロックの位置、サイズに合わせてます。before疑似要素はaタグの子要素にですので、リンク領域になります。

B_J

2021/06/15 05:48

擬似要素、今回だとbeforeですが、それっと設定したものの「前」にhtmlで設定するのと同じようにデザインを設定するってことですよね？たとえば、「いい天気だ」の前に、「今日は」を付けるとか。そういうのは分かりやすいんですが、今回の様な場合はどういうことなんでしょうか？それから、contentのあとに、””があるのも分かりません。サイトも拝見したんですがよく分からないのです。教えて下さい。

hatena19

2021/06/15 06:12

疑似要素は、本来はリンク先のように子要素のコンテンツの前や後にテキストとか画像を挿入する機能です。が、今回は、何も表示せずる領域だけを確保する目的で使用しています。何も表示しないので、content: ""; とします（これがないと疑似要素が生成されないので）また、疑似要素は初期値はインラインなので、display: block; でブロック要素に変換しています。（インラインだとサイズを指定できない） position: absolute; で絶対配置にして、親要素と同じ位置、同じサイズにして、親要素にピッタリと重ねます。下記で同じ方法が紹介されています。リンクのクリック可能範囲を広げるためのCSSテクニック | TechMemo https://techmemo.biz/css/link-click-rangespread/

B_J

2021/06/15 15:24

本当にありがとうございました。リアクションが遅れて本当にすみません。

B_J

2021/06/16 01:28

１点すみません！ベストアンサー選んだあとはご返信できないのですかね？上記リンクは、afterについてですが、今回のような裏技的な方法でやる場合、afterとbeforeの違いはなんですか？

hatena19

2021/06/16 01:44

どちらでも大差はないと思います。厳密にいえばz-indexが変わりますが、動作的には差はないです。

B_J

2021/06/29 13:59

お久しぶりです。CSSにbeforeを設定して、この問題はうまくいったのですが、また新たな問題が出てきてしまいました。それは、ドロップダウンメニューの最後だけにしか、hoverが効かないということです。ドロップダウンメニューはliの子要素というか、そこに設定しています。 hoverしたときに、色を変えたりしたいのですが、複数あるドロップダウンメニューの中の最後のメニューにしかホバーが効かないのは何故なのでしょうか？またその場合、どのようにすればすべてに設定されるようになりますか？

hatena19

2021/06/30 00:43

z-index の設定でなんとかなりませんか。うまくいかないなら、今回とは別の質問になりますから、新規に質問をして、そこで現象の再現できるHTMLとCSSを提示してください。

行動規範の内容に同意します