borderの範囲について、お聞きしたいことがございます。
<div class="infomation_box"> <p class="left_info_box">来院目的</p> <p class="right_info_box">初めての来院(初めて〇〇〇動物病院に来院さ…</p> <p class="left_info_box">希望日時</p> <p id="preffered_date" class="right_info_box">2019年06月15日(土)10時30分</p> </div>
.infomation_box{ text-align:center; border: 1px solid orange; height:40px; } .left_info_box{ display: inline-block; background-color: #ffce75; border-right: 1px solid orange; width: 165px; padding: 3px 10px; border-bottom: orange; font-weight: bold; font-size: 14px; line-height: 2.5; text-align: right; height:34px; } .right_info_box{ display: inline-block; font-size: 14px; margin-left: 7px; margin-right: 21px; margin-left: 7px; margin-top: 10px; margin-bottom: 9px; } #preffered_date{ width:300px; } body{ margin:0; } p{ margin:0; } ul{ list-style:none; }
コードの実行結果は、以下の画像になります。
お聞きしたい点なのですが、borderが「infomation_box」内の上から2つのpタグの回りにしかついておらず、下2つのpタグが無視されてしまっているような状態になっています。
最終的には、下記画像のようにしたいと考えております。
真ん中のborderに関しては、「infomation_box」内上2つに対して、「border-bottom」を設定することで対処しようと考えていますが、大枠の全体を囲うborderは、「infomation_box」に対して設定した、borderを適応させたいと考えています。
解決法につきまして、ご助言頂ければ幸いです。
よろしくお願いします。
追記です
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/01 10:11
2019/07/01 23:43
2019/07/01 23:53
2019/07/02 01:02 編集
2019/07/02 01:09
2019/07/02 01:15
2019/07/02 01:20
2019/07/02 01:40
2019/07/02 02:10
2019/07/02 02:30