我希望在我的文本在同一行之后开始一行,我尝试使用以下简单代码
<html><body>My Text<hr/></body></html>
这似乎<hr>不是一个选项,因为它总是在一个新的行上,我希望从我的文本右侧开始这一行.
有帮助吗？
Spu*_*ley 16
该<hr>有把它放在一个新行的默认样式.但是,默认样式可以被覆盖,就像对任何其他元素一样.<hr>实质上只是一个<div>带有默认边框设置的空白.
要证明这一点,请尝试以下方法:
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
有许多方法可以覆盖样式以<hr>实现您的目标.
你可以尝试使用display:inline-block;连同width设置,因为我有以上.这种方法的缺点是它需要你知道你想要的宽度,尽管有很多方法可以解决这个问题width:100%;,并且容器<div>中的整行overflow:hidden;可能有这个技巧,例如:
<div style='overflow:hidden; white-space:nowrap;'>Blah blah<hr style='display:inline-block; width:100%;' /></div>
另一种选择是使用float:left;.你需要将它应用于该行中的所有元素,并且我不喜欢这个选项,因为我发现它float往往会导致比它解决的更多问题.但试一试,看看它是否适合你.
您可以尝试各种其他风格组合 - 试一试,看看哪些有效.
小智 12
使用FlexBox属性可以轻松实现.
.mytextdiv{
display:flex;
flex-direction:row;
align-items: center;
}
.mytexttitle{
flex-grow:0;
}
.divider{
flex-grow:1;
height: 1px;
background-color: #9f9f9f;
}<div class="mytextdiv">
<div class="mytexttitle">
My Text
</div>
<div class="divider"></div>
</div>hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
这样有道理吗？
<p>My text</p>
<hr />