javascript - HTML 页面左侧和右侧的文本

Question

我想要类似这样的 HTML 输出 -

My First Sentence                       My Second Sentence

所以，我的代码是 -

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

输出是 -

My First SentenceMy Second Sentence

所以我向元素添加了“margin-left: 100px”，然后输出位于下一行 -

My First Sentence                       
                                 My Second Sentence

请引导我完成此操作。很可能其他一些 css 正在覆盖它，我需要知道如何获得我想要的 View 。我当前的代码看起来像 -

<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

我看到 display 和 text-align/text-align-last 有 3 个选项(您已经使用了 float)。选择是关于您打算支持的浏览器的版本

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>