时间戳

首页 > 解决方案 > 如何在单词右侧插入行？

html - 如何在单词右侧插入行？

问题描述

我正在创建多行报告，我想插入自动行而不必按 SHIFT 加下划线键盘。我没有找到与我的问题相关的任何内容

我想要这样的模型：

第 1 行：_____________

第 2 行：_____________

第 3 行：_____________

第 4 行：_____________

我已经用 tag 尝试了所有东西<hr>，但它出了问题

<p>Line 1: <hr align="right" width="200"></p>

<p>Line 2: <hr align="right" width="200"></p>

<p>Line 3: <hr align="right" width="200"></p>

<p>Line 4: <hr align="right" width="200"></p>

如您所见，该行向右太远，并且未与文本对齐。

如模型所示，如何使线条靠近单词？

标签： htmlcss

解决方案

您可以使用 CSS 执行此操作 - 使用::after伪元素并将其设置为具有底部边框并使用 margin-left 将其移动到文本的右侧。

p::after {
 content: ' ';
 width: 200px;
 border-bottom: solid 1px #333;
 display: block;
 margin-left: 50px
}
<p>Line 1:</p>

<p>Line 2:</p>

<p>Line 3:</p>

<p>Line 4:</p>

推荐阅读