ヘッダーロゴの脇に会社名を横並びしたい

実現したいこと
ヘッダーロゴの脇に会社名を横並びしたい

現状
会社名が縦になってしまいます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
7  <title>株式会社フェイバーエンジニアリング</title>
8  <meta name="description" content="フェイバーエンジニアリングはプログラム制作を中心とした会社です。
9  制御系やオープン系、アプリケーション等を手掛けております。
10  お客様の要望を実現させるお手伝いをさせて頂きます。
11  どうぞご気軽にご相談ください。">
12  <link rel="stylesheet" href="css/reset.css">
13  <link rel="stylesheet" href="css/style.css">
14</head>
15<body>
16  <header class="header">
17    <div class="header_inner inner">
18      <h1 class="header_logo">
19        <a href="index.html" class="header_logo_link">
20          <img src="img/logo.jpg" alt="株式会社フェイバーエンジニアリング">
21          <p class="header_logo_name">株式会社<br>フェイバーエンジニアリング</p>
22        </a>
23     </h1>
24   
25      <ul class="header_nav">
26        <li><a href="">事業内容</a></li>
27        <li><a href="">製品情報</a></li>
28        <li><a href="">業務履歴</a></li>
29        <li><a href="">会社案内</a></li>
30      </ul>
31      <div class="header_nav_contact"><a href="">お問い合わせ</a></div>
32    </div>
33  </header>
34  
35</body>
36</html>

css
1//header
2.header {
3  background: $color-main;
4  height: 110px;
5}
6
7.header_inner {
8  display: flex;
9  align-items: center;
10  height: inherit;
11}
12
13.header_logo {
14  width: 120px;
15}
16
17.header_logo_link {
18  display: flex;
19  text-decoration: none;
20  
21}
22
23img {
24  display: block;
25}
26
27.header_logo_name {
28  height: 20px;
29  width: 0px;
30  margin-left: 20px;
31  color: #fff;
32  font-size: 20px;
33  line-height: 1;
34}
35
36.header_nav {
37  display: flex;
38  align-items: center;
39  margin-left: auto;
40
41  li {
42    &:not(:first-child) {
43    margin-left: 30px;
44  }
45
46    a {
47      color: #fff;
48      text-decoration: none;
49    }
50  }
51}
52
53.header_nav_contact {
54
55  a {
56    line-height: 50px;
57    background: $color-accent;
58    margin-left: 20px;
59    width: 160px;
60    height: 50px;
61    border-radius: 5px;
62    display: inline-block;
63    text-align: center;
64    text-decoration: none;
65    color: $color-text;
66  }
67}
68```

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

回答2件

下記の2か所でwidthを設定して幅を制限しているからではないでしょうか。下記のwidth設定を削除すればどうでしょう。

css
1.header_logo {
2  width: 120px;
3}

css
1.header_logo_name {
2  height: 20px;
3  width: 0px;
4  margin-left: 20px;
5  color: #fff;
6  font-size: 20px;
7  line-height: 1;
8}

投稿2022/03/14 06:43

hatena19

総合スコア34352

0412otsu

2022/03/14 23:29

widthの設定を削除したら、横並びになりました。

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

css
1.header_logo {
2  width: 120px;
3}
4
5.header_logo_name {
6  height: 20px;
7  width: 0px;
8  margin-left: 20px;
9  color: #fff;
10  font-size: 20px;
11  line-height: 1;
12}

となっていますので、ロゴ画像が0pxだったとしても、120/20=6文字程度しか入らないです。
また、0pxのボックスに20pxの文字を無理やり入れようとしているのも原因です。
とりあえずの対処としてはword-break: keep-all;でもできますが、レイアウトを見直してもう少し幅を取ってみてはどうでしょうか。

投稿2022/03/14 06:51