如何解决跨多个元素的连续边框
我正在尝试将行号添加到代码片段中。它正在工作,除了行号和代码行之间的边界不连续的装饰细节。相反,它有小而丑陋的间隙。
Inspect 元素似乎没有解释间距。
我也试过摆弄 line-height
,但没有任何真正有效的方法不会显着影响间距。
pre {
counter-reset: linenum;
font-family: "DejaVu Sans Mono";
}
pre code {
counter-increment: linenum;
}
pre code::before {
content: counter(linenum);
display: inline-block;
width: 3em;
text-align: right;
padding-right: 0.5em;
margin-right: 0.5em;
color: #888;
border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>
解决方法
该问题是由 font-family
中设置的 pre
引起的,因此简单的解决方法是删除字体,该字体将默认为 monospace
pre {
counter-reset: linenum;
}
pre code {
counter-increment: linenum;
}
pre code::before {
content: counter(linenum);
display: inline-block;
width: 3em;
text-align: right;
padding-right: 0.5em;
margin-right: 0.5em;
color: #888;
border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>
如果你想保留字体,那么你有几种方法来实现你想要的:
- 在
display: grid
中设置pre
pre {
counter-reset: linenum;
font-family: "DejaVu Sans Mono";
display: grid;
}
pre code {
counter-increment: linenum;
}
pre code::before {
content: counter(linenum);
display: inline-block;
width: 3em;
text-align: right;
padding-right: 0.5em;
margin-right: 0.5em;
color: #888;
border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>
- 在
display: flex
中设置flex-direction: columnm
和pre
pre {
counter-reset: linenum;
font-family: "DejaVu Sans Mono";
display: flex;
flex-direction: column
}
pre code {
counter-increment: linenum;
}
pre code::before {
content: counter(linenum);
display: inline-block;
width: 3em;
text-align: right;
padding-right: 0.5em;
margin-right: 0.5em;
color: #888;
border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>
- 在
display: table-row
中设置code
pre {
counter-reset: linenum;
font-family: "DejaVu Sans Mono";
/*just be coeherent with table-row in the child */
display: table
}
pre code {
counter-increment: linenum;
display: table-row
}
pre code::before {
content: counter(linenum);
display: inline-block;
width: 3em;
text-align: right;
padding-right: 0.5em;
margin-right: 0.5em;
color: #888;
border-right: 1px solid #888;
}
<pre>
<code>Line one</code>
<code>Line two</code>
<code>Line three</code>
</pre>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。