[natsu]

トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】最新版
【お使いのブラウザ】google chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

発地こころのケアクリニック

眠れない、食欲がない、やる気が出ない、気分が落ち込むなどの症状や、うつ病、不眠症、不安障害、パニック障害、摂食障害、統合失調症、認知症、発達障害などの疾患をお…

sub.natsublog.org

===

連投失礼いたします。

下記のようにヘッダーの右上にボタンと電話番号を横並びで表示したいです。

親要素に display:flex; を付けるなど試してみたのですが、思うような表示になりませんでした。
ご教授いただければ幸いです。

現在の設定を記載いたします。

デザイン＞ヘッダー

ヘッダーレイアウト：2行

PC用ヘッダー位置：上部固定

ヘッダーコンテンツ

<div>軽井沢・心療内科・精神科・カウンセリング</div>
<a href="https://select-type.com/rsv/?id=eFwgX3rN2ug">オンライン予約はこちら</a>
<p class="header-tel-kokoroni">
ココロニ<p>
<h3 class="top-phone"><i class="fas fa-phone-alt"></i> 0267-31-5562</h3>

追加CSS

body {
  color: #6D6D6D;
}

.header-button-online {
  margin: 5px;
  margin-left: 50px;
}
.top-phone{
  color: #A16E65;
  font-size: 2.3rem;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  line-height: 0;
}

.header-tel-kokoroni {
  letter-spacing: 1.0em;
  font-size: 12px;
}

.header-text {
  text-align: right;
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

下記でどうでしょうか？

<div class="u-text-right">
	軽井沢・心療内科・精神科・カウンセリング
</div>
<div class="my-header-content">
	<div class="my-header-content__button">
		<a class="c-btn header-button-online" href="https://select-type.com/rsv/?id=eFwgX3rN2ug">オンライン予約はこちら</a>
	</div>
	<div class="my-header-content__tel">
		<p class="header-tel-kokoroni">　　 
			ココロニ
		</p>
		<h3 class="top-phone"><i class="fas fa-phone-alt"></i>  0267-31-5562</h3>
	</div>
</div>

.my-header-content {
    display: flex;
    align-items: flex-end;
}

.my-header-content__button .c-btn {
    margin: 0 1rem 0 0;
}

/* .header-button-online の margin は削除 */

♥ 0

いいねをした人: 居ません

[natsu]

思っていた通りのレイアウトになりました。

迅速な対応、ありがとうございました！

♥ 1

いいねをした人: 居ません

[投稿者]

投稿