如何对齐 HTML 中的中括号 【】 及其第二行文本内容？

中括号文字如何与第二行对齐，既美观又牢靠？

问题

如何在 html 中对齐中括号 【】 和第二行的文本内容？

尝试过的解决方法

可以使用 margin-left 属性给中括号添加负边距，实现对齐。

更好的方法

1. 使用 text-indent 缩进第二行

主要是中文符号的问题，可以使用 text-indent 属性让第二行缩进一个空格，实现与中括号对齐。代码：

<div>【内容】内容</div>
<div style="text-indent: 1em;">内容内容</div>

2. 给第一行负缩进

也可以给第一行添加负缩进，实现与第二行对齐。代码：

<div style="text-indent: -10px;">【内容】内容</div>
<div>内容内容</div>

3. 使用伪类选择器

如果中括号不总是出现，则可以使用伪类选择器实现对齐。代码：

div:not(:first-child) {
  text-indent: 1em;
}

以上就是如何对齐 HTML 中的中括号 【】 及其第二行文本内容？的详细内容，更多请关注其它相关文章！