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会覆盖它，我需要知道如何才能获得我想要的视图。我目前的代码看起来像 -

<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个选项（您已使用浮动）。选择是关于您打算支持的浏览器的数量

＆＃13;

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;
}
*/

＆＃13;

<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>

＆＃13;

Answer 2

您可以创建不同的列，然后将文本左对齐。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

你可以将它包装在div中，使其保持一致。

 <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

通过添加margin-left工作：80px;。所以最终的代码是 -

<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>

HTML页面左侧和右侧的文字

4 个答案: