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

♥ 0

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

このトピックには2件の返信、2人の参加者があり、最後にnatsuにより3年、 4ヶ月前に更新されました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)

投稿者

投稿
2020年12月14日 11:09 PM #63162
natsu
閲覧者

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

【お使いの 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

いいねをした人: 居ません
2020年12月15日 3:06 PM #63195
キタジマタカシ
参加者

♥ 2253
下記でどうでしょうか？
```
<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

いいねをした人: 居ません
2020年12月15日 3:34 PM #63204

natsu
閲覧者

♥ 6

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

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

♥ 1

いいねをした人: 居ません
投稿者

投稿