Html 文本后的行
我希望在同一行中的文本之后有一行开始，我已经尝试使用以下简单代码Html 文本后的行,html,css,Html,Css,我希望在同一行中的文本之后有一行开始，我已经尝试使用以下简单代码 <html><body>My Text<hr/></body></html> My Text 似乎不是一个选项，因为它总是在一个新行上，我希望该行从文本的右侧开始 有什么帮助吗 hr { width: {so it fits on the same line as the p tag}; } p { float: left; width: {enough to acc
<html><body>My Text<hr/></body></html>
My Text
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 />
我的文本
My Text
float:right如果您想让
宽度填充行的其余部分，则需要调整宽度。使用内联或浮动，据我测试，即使这是我的第一个想法，它也不能正常工作。进一步看，我使用了以下css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
<div>My Text</div><hr/>
My Text
演示
我所做的，是在这两个元素中添加相对位置（给我z-index
use的优势）。同样从我拥有人力资源的位置：relative
的那一刻起，我把它从底部移动了：17px
。这会将其移动到包含文本的div
上方。应用z-index
值并为div添加background:white
，将文本置于行上方。当然，不要忘记对文本使用宽度，否则将占用父元素的整个宽度。该
具有将其置于新行的默认样式。但是，默认样式可能会被过度使用，就像对任何其他元素一样
本质上只是一个带有默认边框设置的空
要演示这一点，请尝试以下操作：
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
另一个选项是使用float:left。您需要将此应用于行中的所有元素，我不喜欢此选项，因为我发现float
往往会导致比它解决的问题更多的问题。但是试一下，看看它是否适合你
您还可以尝试各种其他样式的组合—试一试，看看效果如何。这里有一种可能的方法，但它有一些假设/要求。您的问题应该进行编辑，以提供有关您正在构建的内容的更具体信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Blah</title>
<style type="text/css">
body {
background-color : white;
font-family : Arial;
font-size : 16px;
}
.wrap {
background: transparent url(px.png) repeat-x 0px 85%;
/* Different fonts or text sizes may require tweaking of that offset.
px.png is a one-pixel(though can be thicker if needed) image in whatever color you want the line */
}
.inner {
background-color : white;
/* Should match the background of whatever it's sitting over.
Obviously this requires a solid background. */
}
</style>
</head>
<body>
<div class="wrap"><span class="inner">Here is some text</span></div>
</body>
</html>
废话
身体{
背景色：白色；
字体系列：Arial；
字体大小：16px；
}
.包裹{
背景：透明url（px.png）重复-x0px 85%；
/*不同的字体或文本大小可能需要调整该偏移量。
px.png是一个单像素（如果需要可以加厚）图像，可以是您想要的任何颜色*/
}
.内部{
背景色：白色；
/*应该和上面的背景相匹配。
显然，这需要坚实的背景*/
}
这里有一些文字
我使用了以下技术：
给容器div一个带有水平线的背景图像。
在container div中放置一个元素（比如
）（我把它放在右边，所以float:right；
）
使用以下css：
.line-container {
width: 550px;
height: 40px;
margin-top: 10px;
background-image: url("/images/horizontal_line.png");
}
.line-container h3 {
padding-left: 10px;
float: right;
background-color: white;
}
使用FlexBox属性可以轻松实现这一点
.mytextdiv{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.mytexttitle{
flex-grow:0；
}
.分隔器{
柔性生长：1；
高度：1px；
背景色：#9f9f9f；
}
我的文字
一些文本
试试这个。它起作用了
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
你好文本
您还可以使用它在文本之间画一条线，如
Hello-----------------HelloOP从未指定行的用途，但我想分享我在制作html模板时所做的工作，在该模板中，用户需要在打印文档后在上面写一行
因为hr标记默认为它自己的行，并且默认为在行中居中，所以我决定使用div并设置样式
HTML
This is my text.<div class='fillLine'></div>
jsiddle演示
希望这能帮助任何和我有同样目标的人。下面的代码帮我完成了任务
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">
HTML文件：
----------
详细信息
CSS文件：
----------
.章节标题{
浮动：左；
字体大小：粗体
}
人力资源{
浮动：左；
宽度：80%；
}
内联：
-------
详细信息
此行的目的是什么？HR出现在下面（默认情况下）的原因是，这就是整点：该标记应该表示分隔符。如果你想要达到的目标只是装饰性的，那么有更合适的方法来实现。（我在下面试一试）这个问题还有一点解释的余地；您可能希望添加一个图像，确切地说明“在同一行上”的含义；DR
fini
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
Below code did the job for me
HTML File:
----------
<p class="section-header">Details</p><hr>
CSS File:
----------
.section-header{
float: left;
font-weight: bold
}
hr{
float: left;
width: 80%;
}
INLINE:
-------
<p style="float: left;font-weight: bold">Details</p><hr style="float: left;width: 80%;">