###前提・実現したいこと
お問い合わせボタンを右側に配置し、電話番号(上)と営業時間(下)に並べて、お問い合わせボタンの左側に配置したい。
CSS?をフロート?frexbox?どのようなものにすればよいでしょうか?
###発生している問題・エラーメッセージ
うまく回り込みができない
###該当のソースコード
<span class="header-tel"><i class="fa fa-phone"></i> <a href="tel:000-111-2222">000-111-2222</a></span><br /><span class="header-txt">受付時間 9:00~18:00</span> <a class="button" href="https://example.com/contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> お問い合わせ・ご相談</a>
###完成イメージ
0120-000-000 | お問い合わせボタン |
受付時間 9:00~18:00 | お問い合わせボタン |
※完成イメージではお問い合わせボタンが上下にありますが実際には一つです。
お問い合わせボタンのサイズが1としたら、電話番号と受付時間0.5ずつにないります。
.button { position: relative; background-color: #f39c12; box-shadow: 0 3px 0 #e67e22; border-radius: 4px; font-size: 16px; color: #fff; width: 247px; line-height: 42px; display: inline-block; text-align: center; text-decoration: none; } .button:active { top: 3px; box-shadow: none; } .button::before, .button::after { position: absolute; z-index: -1; display: block; content: ''; } .button, .button::before, .button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .button:hover { opacity: 0.8; /* マウスオーバー時透明度を20%に指定 */ color: #fff; }
回答2件
あなたの回答
tips
プレビュー