Html 文本后的行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4861057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line right after text
提问by Nikko
I'd like to have a line that starts right after my text on the same line, I've tried with the following simple code
我想在同一行上的文本之后立即开始一行，我尝试使用以下简单代码
<html><body>My Text<hr/></body></html>
It seems that <hr>is not an option because it is always on a new line and I'd like the line to start at the right of my text.
这似乎<hr>不是一个选项，因为它总是在一个新行上，我希望该行从我的文本右侧开始。
Any help ?
有什么帮助吗？
回答by Spudley
The <hr>has default styling that puts it on a new line. However that default styling can be over-ridden, in the same way as it can for any other element. <hr>is in essence nothing more than an empty <div>with a default border setting.
在<hr>具有默认样式是把它放在一个新行。然而，默认样式可以被覆盖，就像它可以覆盖任何其他元素一样。<hr>本质上只不过是一个<div>带有默认边框设置的空白。
To demonstrate this, try the following:
为了证明这一点，请尝试以下操作：
<div>Blah blah<hr style='display:inline-block; width:100px;' />dfgdfg</div>
There are a number of ways to override the styling of <hr>to acheive your aim.
有多种方法可以覆盖 的样式以<hr>实现您的目标。
You could try using display:inline-block;along with a widthsetting, as I have above. The down-side of this approach is that it requires you to know the width you want, though there are ways around this - width:100%;, and the whole line in a container <div>that has overflow:hidden;might do the trick, for example:
您可以尝试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>
Another option would be to use float:left;. You'd need to apply this to all the elements in the line, and I dislike this option as I find that floattends to cause more problems than it solves. But try it and see if it works for you.
另一种选择是使用float:left;. 您需要将此应用于该行中的所有元素，我不喜欢此选项，因为我发现这float往往会导致比解决的问题更多的问题。但是尝试一下，看看它是否适合你。
There are various other combinations of styles you can try - give it a go and see what works.
您还可以尝试多种其他风格组合 - 试一试，看看哪些是有效的。
回答by Deepak
Using FlexBox Property this can be achieved easily.
使用 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>回答by Merijn
Try this:
尝试这个：
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
<html><body>My Text<hr style="float: right; width: 80%"/></body></html>
The inline CSS float: rightwill keep it on the same line as the text.
You'll need to adjust the widthif you want it to fill the rest of the line.
内联 CSSfloat: right会将其与文本保持在同一行。width如果您希望它填充该行的其余部分，则需要调整。
回答by Sotiris
Using inlineor float, as far as I tested it doesn't work properly even if this was my first thought. Looking further I used the following css
使用inlineor float，据我测试它不能正常工作，即使这是我的第一个想法。进一步看，我使用了以下 css
hr {
bottom: 17px;
position: relative;
z-index: 1;
}
div {
background:white;
position: relative;
width: 100px;
z-index: 10;
}
html
html
<div>My Text</div><hr/>
Demohttp://jsfiddle.net/mFEWk/
What I did, is to add position relative in both elements (to give me the advantage of z-indexuse). Also from the moment I had position:relativefor hrI moved it from the bottom:17px. This move it above the divthat contains the text. Applying z-indexvalues and adding background:whitefor the divputs the text above the the line. Of course don't forget to use a widthfor the text, otherwise will take the whole width of the parent element.
我所做的是在两个元素中添加相对位置（给我z-index使用的优势）。此外，从目前我已经position:relative为hr我从移动它bottom:17px。这将它移到div包含文本的上方。应用z-index值并添加background:white用于div将文本置于行上方。当然不要忘记对width文本使用 a ，否则将占用父元素的整个宽度。
回答by Даниил Пронин
<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">Exactly what you want.
正是你想要的。
回答by Mukesh Rai
Try this. It works
尝试这个。有用
<p style="float:left;">
Hello Text
<hr style="float:left; width: 80%"/>
</p>
You can also use this to draw a line between texts like
您还可以使用它在文本之间绘制一条线，例如
Hello -------------------------- Hello
你好你好
回答by Ryan Gibbs
The OP never specified the purpose of the line, but I wanted to share what I ended up doing when I was making an html template where the user needed a line to write on after the document was printed.
OP 从未指定该行的用途，但我想分享我在制作 html 模板时最终做的事情，在该模板中，用户在打印文档后需要一行书写。
Because the hr tag defaults to its own line and defaults to being centered in the line, I decided to use a div and style it instead.
因为 hr 标签默认为它自己的行并且默认为在行中居中，所以我决定使用 div 并为其设置样式。
HTML
HTML
This is my text.<div class='fillLine'></div>
CSS
CSS
.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}
JSFiddle Demo
JSFiddle 演示
Hope that helps anyone who had the same goal as me.
希望对和我有相同目标的人有所帮助。
回答by Utkarsh Bhushan
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%;">
回答by benhowdle89
hr {
width: {so it fits on the same line as the p tag};
}
p {
float: left;
width: {enough to accomodate the hr};
}
That sort of make sense?
这样说有道理吗？
<p>My text</p>
<hr />
回答by Su'
Here's one potential approach, but it has some assumptions/requirements. Your question should be edited to give more specific information about what you're building.
这是一种潜在的方法，但它有一些假设/要求。应该编辑您的问题以提供有关您正在构建的内容的更具体信息。
<!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>
