Question

我有一个<pre>，里面有一个<code>块，其中可以扩展到某个max-height，之后会出现一个滚动条。我希望为此添加一个:before，其长度与<code>块中内容的长度相同，但是像素宽度一定是固定的。对于上下文，我在我主持的subredit（因此只能使用CSS）的<code>块中的行之前添加行号，从而滥用content:属性和数字列表。这是我正在使用的精简版本：

pre {
    max-height: 50px;
	border:1px solid #000000;
	z-index:1;
	position:relative;
    overflow: auto;
}
pre code{
	padding:0px 11px 0px 11px!important;
	margin-left:30px;
	display:block;
}

pre code:before{
	height: 100%;
	color:#FFF;
	position: absolute;
	left:-5px;
	width:30px;
	white-space:pre-wrap;
	direction:rtl;
	overflow:hidden;
	z-index:2;
	background:#369;
	left:0px;
	padding-right:5px;
	content:"1   2   3   4   5   6   7   8   9   10"
}

<pre>
<code>Line one
Line two
Line three
Line four
Line five
Line six
Line seven
</code>
</pre>

这很好用，但是当:before内容的长度超过{时，出现在代码块左侧的<code>不会一直向下延伸{1}}，使其创建滚动条。它仅在滚动框的可见尺寸向下显示，而不是max-height内容本身（在框内向下滚动）可见。我可以将<code>替换为height: 100%，但是数字远远超出了height: auto块的长度。

如何仅使用CSS使正在创建的<code>元素跨越固定宽度（30px）的滚动框内:before块的整个高度？我也无法“硬编码”任何与<code>相同的值，因为在用户将鼠标悬停在代码上时，它会暂时增加。

Answer 1

添加相对于code而不是pre的位置

before的{{1}}为code，并且您已将位置position absolute分配给relative，其高度为50像素，即pre只有50像素。

因此，通过使代码相对，before的高度就等于before

code

pre code {
  padding: 0px 11px 0px 40px!important;
  /*margin-left: 30px;*/
  display: block;
  position:relative;
}

pre {
  max-height: 50px;
  border: 1px solid #000000;
  z-index: 1;
  /*position: relative;*/
  overflow: auto;
}

pre code {
  padding: 0px 11px 0px 40px!important;
  /*margin-left: 30px;*/
  display: block;
  position: relative;
}

pre code:before {
  height: 100%;
  color: #FFF;
  position: absolute;
  left: -5px;
  width: 30px;
  white-space: pre-wrap;
  direction: rtl;
  overflow: hidden;
  z-index: 2;
  background: #369;
  left: 0px;
  padding-right: 5px;
  content: "1   2   3   4   5   6   7   8   9   10"
}

如何在滚动框中制作具有固定宽度但相对高度的元素

1 个答案: