Question

我想在同一行的文字后面开始一行，我尝试使用以下简单代码

<html><body>My Text<hr/></body></html>

似乎<hr>不是一个选项，因为它总是在一个新行上，我希望该行从我的文本右侧开始。

任何帮助？

Answer 1

<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往往会导致比它解决的问题更多的问题。但试一试，看看它是否适合你。

您可以尝试各种其他风格组合 - 试一试，看看哪些有效。

Answer 2

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

Answer 3

试试这个：

<html><body>My Text<hr style="float: right; width: 80%"/></body></html>

内联CSS float: right会将其与文本保持在同一行。如果您希望它填充剩下的部分，则需要调整width。

Answer 4

使用inline或float，就我测试而言，即使这是我的第一个想法，它也无法正常工作。进一步观察我使用了以下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/>

演示 http://jsfiddle.net/mFEWk/

我所做的是在两个元素中添加相对位置（为了给我z-index使用的优势）。从position:relative hr bottom:17px开始，我就从div移开了它。这会将其移到包含文本的z-index之上。应用background:white值并为div添加width会将文字放在该行上方。当然不要忘记使用{{1}}作为文本，否则将占用父元素的整个宽度。

Answer 5

<div style="float: left">Some text</div>
<hr style="clear: none; position: relative; top: 0.5em;">

正是你想要的。

Answer 6

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

Answer 7

这是一种潜在的方法，但它有一些假设/要求。应编辑您的问题，以提供有关您正在构建的内容的更具体信息。

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

Answer 8

我使用了以下技术：

为容器div提供带有水平线的背景图像。将一个元素（如<h3>）放入容器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;
}

Answer 9

试试这个。它的工作原理

<p style="float:left;">
    Hello Text
    <hr style="float:left; width: 80%"/>
</p>

您也可以使用它在

之类的文本之间画一条线

您好-------------------------- Hello

Answer 10

OP从未指定该行的目的，但我想分享我在制作一个html模板时最终要做的事情，用户在打印文档后需要一行来写。

因为hr标签默认为它自己的行并且默认为在行中居中，所以我决定使用div并将其设置为样式。

<强> HTML

This is my text.<div class='fillLine'></div>

<强> CSS

.fillLine {
display:inline-block;
width: 200px;
border-bottom: 1px solid black;
}

JSFiddle演示

Style Div for Line After Text

希望能帮助任何与我有相同目标的人。

Answer 11

       Column(
        children: <Widget>[
          Spacer(flex: 1),
          ListView.builder(
              shrinkWrap: true,
              itemCount: 6,
              itemBuilder: (context, index) {
                return Text('item number $index');
              }),
          Spacer(flex: 2),
        ],
      )

文字后右边

11 个答案: