1

我有一个页面的标题，我想要一行从文本开始到行尾，不管窗口的宽度是多少，有点：

TITLE----------------------------------------------------------------------------

但是一整行，我只是-为了演示而写的。我看到了，<hr>但它总是排在后面，而不是在正文之后。我也看到了这篇文章，但这并不是我想要的。

谢谢！

4

6 回答 6

3

好的，这是另一个答案。您可以只使用 fieldset 元素

  <fieldset>
  <legend>Title comes here</legend>
  </fieldset>

并将其设置为

fieldset { border-top:1px solid #333; }

这里有一个演示：http: //jsfiddle.net/SQujE/

于 2012-05-23T17:57:51.487 回答
2

尝试使用两个 DIV 元素。第一个可以是 100% 的页面宽度，并且可以包含第二个。

让内部 DIV 包含您的“标题”文本并自动调整大小。将外层div的背景设为线条图像，将内层div的背景设为与普通页面背景相同的颜色。

于 2012-05-23T17:36:19.527 回答
2

对于 hr 元素，您可以将 CSS 属性 display 与值 inline-block 以及宽度一起使用

hr { display: inline-block; width: 90%; }

在您的 HTML 中，

Title<hr />

演示：http: //jsfiddle.net/67f2E/

与“标题”一词和 hr 元素垂直对齐到中间的一点变化：http: //jsfiddle.net/wHPQA/

于 2012-05-23T17:38:15.193 回答
1

尝试这个 ：

Title<hr style="display: inline-block; width: 90%; margin-bottom: 4px; margin-left: 5px;" />

基于 saganbyte 的回答。margin-bottom玩从底部和margin-left左侧的偏移量。逻辑不行吗？

于 2012-05-23T17:44:01.247 回答
1

我知道我的回答有点晚了，但是做你想做的事情很长。

HTML： <span id="test" >HI</span>

JS：

document.getElementById("test").style.position="relative";
var line=document.createElement("div");
line.setAttribute("style","width:"+(document.getElementsByTagName("html")[0].offsetWidth-document.getElementById("test").offsetWidth-1)+"px;height:1px;position:absolute;top:6px;left:"+(document.getElementById("test").offsetWidth+1)+"px;background-color:black;");
document.getElementById("test").appendChild(line);

小提琴：http: //jsfiddle.net/QrEgH

奖励：
1-没有 CSS，只有一小块 JS。
2-一个非常小的 HTML，你只需添加跨度。
3-这个小提琴压缩较少并带有评论：http: //jsfiddle.net/VfCJ3

于 2012-05-23T20:21:14.707 回答
1

这个问题可能很老了，但我今天需要这个效果，并使用绝对定位的 CSS 伪元素来实现。首先，在 HTML 中的元素文本周围放置一个包装器：

    <h3>
        <span>Title</span>
    </h3>

我们将使用这个跨度来掩盖与文本重叠的行（伪元素）部分。这将产生从文本末尾到行尾的线条效果，但实际上该线条始终是容器的 100% 宽度。

    h3 {
      /* we will absolutely position the line relative to the parent element (h3) */
      position: relative;
      z-index: 1;
    }
    h3 span {
      background: #dedede;   /* make this the same color as the page background! */
      padding-right: 0.5em;  /* this will be the 'margin' from the text to the line */
    }
    /* Add Line After Text*/
    h3 span::after {
      content: '';
      width: 100%;
      height: 2px;
      background: #919098;
      /* position the line within the parent element */
      position: absolute;
      bottom: 0.5em;                           /* half the height of the text from the bottom */
      left: 50%; transform: translateX(-50%);  /* horizontally center it */
      z-index: -1;                             /* display it behind the parent */
    }

该方法的结果

我用标题元素做到了这一点，但是您可以通过交换标签轻松地在段落或其他元素上使用此效果。祝你好运！

于 2021-09-23T15:49:57.007 回答