HTML页面左侧和右侧的文本

Question

I want the HTML output similar like this -

 My First Sentence My Second Sentence 

So, my code is -

 <h3> <span style="float:left;">My first sentence</span> <a href="#" style="float:right;text-align:right;">My second sentence </a> </h3> 

and the output was -

 My First SentenceMy Second Sentence 

So I added "margin-left: 100px" to the element and then the output was in next line-

 My First Sentence My Second Sentence 

Please guide me through this.Most probably some other css is overwriting it and I need to know how can I get the view what I want. My current code looks like -

 <h3> <span style="float:left;">My first sentence</span> <a href="#" style="float:right;text-align:right;margin-left: 100px;">My second sentence </a> </h3> 

Answer 1

i see 3 options(you used float already) with display and text-align / text-align-last . The choice is about how much old the browser is that you intend to support

 span, a { display: inline-block; /* optionnal*/ } /* newest browser */ h3.flex { display: flex; justify-content: space-between; } /* check it on canisue.com */ h3.tAl { text-align: justify; text-align-last: justify; } /* oldest browsers such as IE8 */ h3.tA { text-align: justify; } h3.tA:after { content: ''; display: inline-block; width: 100%; } /* optionnal to not allow wrapping h3[class=^ta] { white-space:nowrap; } */ 

 <h3 class="flex"> <span>My first sentence</span> <a href="#">My second sentence </a> </h3> <h3 class="tAl"> <span>My first sentence</span> <a href="#">My second sentence </a> </h3> <h3 class="tA"> <span>My first sentence</span> <a href="#">My second sentence </a> </h3> 

Answer 2

You can create different columns and then left align the text inside them.

 .row{ text-align: left; width: 100%; display: block; } .half-row{ display: inline-block; width: 48%; padding: 1%; float: left; } .clear{ clear: both; } 

 <div class="row"> <div class="half-row"> My First Sentence </div> <div class="half-row"> My Second Sentence </div> <div class="clear"></div> <!-- Needed for float handling --> </div> 

Answer 3

You can just wrap it in a div to keep it in line like this.

 <div style="width:100%; height:2em; float:left;">
 <h3>
 <span style="float:left;">My first sentence</span>
 <a href="#" style="float:left;text-align:left;margin-left: 100px;">My second sentence </a>
 </h3>
 </div>

Answer 4

It worked by adding margin-left:80px;. So the final code is -

 <h3> <span style="float:left;">My first sentence</span> <a href="#" style="float:right;text-align:right;margin-left: 80px;">My second sentence </a> </h3>