![](/img/trans.png)
[英]how to select automatically left side link, when I scroll the html page up and down of right side content?
[英]Text at Left side and Right Side in HTML Page
我想要类似这样的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>
我看到3个选项(您已经使用了float)与display
和text-align
/ text-align-last
。 选择是关于您打算支持多少版本的浏览器
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>
您可以创建不同的列,然后使其中的文本左对齐。
.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>
您可以将其包装在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>
它通过添加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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.