a要素の幅を小さくしたい

Question

ヘッダー部分のa要素の一つ（imgにかけている）が横に伸びていて、これをimgの範囲だけに狭めたいのですが、どのようにすればよいでしょうか。

よろしくお願いいたします。

【HTML】

<header>

    <a href="index.html">
           <div class="name">
           <div style="line-height:1;">
           <p>株式会社</p><br><h2>サンプル</h2>
        </div>
        </div>
    </a> 
    
    <a href="index.html"><img src="img/logo.jpg"></a>
    
<div class="header-link">
  <a href="concept.html">concept<br>（初めての方へ）</a>
  <a href="consulting menu.html">consulting menu<br>（コンサルメニュー）</a>
  <a href="company.html">company<br>（会社案内）</a>
  <a href="contact.html">contact<br>（お問い合わせ）</a> 
</div>
    </header>

【CSS】
.name{
display:inline-block;
width:350px;
color:whitesmoke;
padding-left:30px;
font-family:serif;
}
header img{
width:25%;
display:inline-block;
}
header{
background-color:#7b6b7f;
position:fixed;
top:0;
left:0;
width:100%;
z-index:12;
display:flex;
justify-content:space-between;
padding:10px 0 5px 0;
font-family:Century Gothic;

}
.header-link{
display:flex;
justify-content:space-around;
text-align:center;
}
.header-link a{
width:200px;
color:white;
}
header a{
text-decoration:none;
display:inline-block;
}

Answer 1

aが子のimgの範囲を超えて横に伸びているのではなくて、imgがそもそも小さく表示されているのだと思います。
画像はheaderの25%の幅にしたいんですよね？
それなら

<div class="logo">
  <a href="index.html"><img src="img/logo.jpg"></a>
</div>

とdiv要素にぶら下げて

header .logo {
  width: 25%;
}
header .logo img {
  width: 100%;
}

としたら良いかと思います。

Comments

[umi-ushi]

ありがとうございます。

上記の通りにしたら、解決しましたが、imgと"name"との間に空間ができてしまい、また別のdivでくくったら、その要素が横に伸びてしまい、display:inline-blockをかけたらimgが下に行ってしまい、新たな問題が発生しました。（汗

[itagagaki]

少しご自分でいろいろトライしてみて、もしまた行き詰ったら新しく質問されるといいと思います。

[umi-ushi]

はい！ありがとうございます（＾＾