javascript - Text at Left side and Right Side in HTML Page - Stack Overflow

admin管理员组

文章数量:1287253

I want the HTML output similar like this -

My First Sentence                       My Second Sentence

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>

• javascript
• html
• css

Share Improve this question Follow edited Nov 8, 2017 at 18:11 Ankur Rai asked Nov 8, 2017 at 18:06 Ankur RaiAnkur Rai 29711 gold badge66 silver badges1919 bronze badges 5

• 1 Your example works fine here and at jsfiddle/dsxsubqp, are you sure some css styling you have elsewhere isn't messing it up. "Most probably some other css is overwriting it" well we can't help you if we don't know what other css you have. – Patrick Evans Commented Nov 8, 2017 at 18:10
• @PatrickEvans I am sure it is some other css which is messing but in my project there are whole lot of css file and I am not able to find out which one is actually affecting them. So I wanted to know if somehow I can make it work. – Ankur Rai Commented Nov 8, 2017 at 18:14
• Well browsers have element / style inspectors in the developer tools, that would be a good place to start – Patrick Evans Commented Nov 8, 2017 at 18:16
• It just need to be wrapped in a div – Jonny Commented Nov 8, 2017 at 18:16
• It keeps the elements from shifting out of place. – Jonny Commented Nov 8, 2017 at 18:20

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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. */

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>

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>

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>

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>

本文标签： javascriptText at Left side and Right Side in HTML PageStack Overflow