p标签和br标签的对齐

Question

This is what I want. This is what I'm getting.

This is my code. I'm having trouble with the spacing. I can't seem to align p tag with the br tag. I have also tried experimenting with inline but no luck.

 <p class="one"><b>Field of</b> Select all that apply, hold CTRL when clicking to select multiple items <br> <b>study: </b></p><!-- This is where the issue lies. -->

Answer 1

You should have 2 containers, Left bold text should be in the left container with some styles. There is no good way to fix your code for solving your problem, it is easier to rewrite it at all, as for me.

Use padding for having distance between texts and text-align:right; for second line to be closer to the border. Take a look:

 .main_text { padding-left:5px; } .left_text { text-align: right; }

 <div style="display:flex"> <div class='left_text'> <b>Field of <br> study: </b> </div> <div class='main_text'> <label> Select all that apply, hold CTRL when clicking to select multiple items</label> </div> </div>

Answer 2

Let's make it simple,

Use float: right to align "study" correctly. And that's it!

This is your code:

 .one { width: 55px; height: 50px; } .span { float: right; }

 <b>Field of</b>&nbsp;&nbsp;&nbsp;Select all that apply; hold CTRL when clicking to select multiple items <p class="one"> <b><span class="span">Study:</span></b> </p>

CodePen: https://codepen.io/marchmello/pen/abOPJzp?editors=1100

Answer 3

Flexbox is perfect for this kind of placement. Use align-items:center for the first positioning

 div{ display:flex; align-items:center; font-size:19px; } #a1{ display:block; margin-right:14px; width:64px; }

 <div> <p id='a1' ><b>Field of <br/>Study </b></p> <p>Select all that apply, hold CTRL when clicking to select multiple items </p> </div>

or use align-items:flex-start if you want the placement like this:

 div{ display:flex; align-items:flex-start; font-size:19px; } #a1{ display:block; margin-right:14px; width:64px; }

 <div> <p id='a1' ><b>Field of <br/>Study </b></p> <p>Select all that apply, hold CTRL when clicking to select multiple items </p> </div>