如何在CSS中内联显示标题和段落元素？

Question

I have a HTML code which contains one heading and 2 paragraph elements:

<div class="inter">

<h4>Note</h4>

<p>To add/remove a dependent or to modify your spouse's insurer information,  go to the My Life Events section and follow the instructions.</p>

<p>To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.</p>

</div>

I want the above code to be displayed in the following way:

I tried using div.inter>p,h4 { display: inline;} but by using this I am not able to create a line break between 2 paragraphs(as shown below).

Note: To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and follow the instructions.To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.

Answer 1

Float the heading <h4> .

 * { margin: 0; padding: 0; } .inter > h4 { float: left; padding-right: .5em; } p { margin-bottom: 1em; } 

 <div class="inter"> <h4>Note</h4> <p>To add/remove a dependent or to modify your spouse's insurer information, go to the My Life Events section and follow the instructions.</p> <p>To modify your beneficiaries, please complete and sign the Beneficiary designation form and return it to your plan administrator.</p> </div> 

Answer 2

H2.... are block level element.

Better use H4 instead of span tag . Because if use span tag means no need to write code for same line

"span tag is default inline element only"

then what ever style write in span. Try to make code for easily.

Answer 3

Simply add the following css and your good to go.

.inter h4, p:nth-of-type(1) { display: inline !important;}

Sample: http://codepen.io/Nasir_T/pen/edwqZz