在 HTML/CSS 中的文本下划线答案

【问题标题】：Line under a text in HTML/CSS在 HTML/CSS 中的文本下划线
【发布时间】：2018-01-17 13:12:16
【问题描述】：

我是 HTML 和 CSS 的初学者/学习者。

我怎样才能在一些文本下加一行？

我不想在文本下划线，但我想按照这个思路做一些事情

我该如何实现？

【问题讨论】：

标签： html css underline

【解决方案1】：

您可以使用<hr> 标签。

这是一个带有一些示例样式的漂亮页面：https://css-tricks.com/examples/hrs/

如果你想让它只有容器宽度的 80%，你可以添加一些 CSS，如下所示

hr {
  width: 80%;
}

&lt;hr&gt;

【讨论】：

你也可以使用css属性，border-bottom。

【解决方案2】：

如果你想控制线条的大小，你可以使用 CSS。

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>

你可以做的另一件事是边界底部

<!DOCTYPE html>
<html>
<head>
<style>
p  {
    border-style: solid;
    border-bottom: thick line #ff0000;
    border-top: none;
    border-left: none;
    border-right: none;
    width: 250px;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

</body>
</html>

【讨论】：

【解决方案3】：

您可以使用hr 标签并通过 CSS 设置样式：

.x {
  width: 40%;
  float: left;
}

<h1>Test</h1>
<hr class="x">

【讨论】：

谢谢，我会试试的
在另一个答案中没有左对齐，即不完全在文本下方

【解决方案4】：

只需使用<hr></hr> 标签

示例代码：

    <body>
      <h1> Header</h1>
      <hr>
      <p> text under header </p>
    </body>

【讨论】：

但我想让它比整个页面都小
查看 w3schools，他们有一个很棒的页面，里面有很多关于这类东西的信息...w3schools.com/tags/tag_hr.asp
<hr> 是一个独立的标签。

【解决方案5】：

这是一个有效的问题，我知道你的意思

span{
  border-bottom:1px solid #000;
}

【讨论】：