Question

我在HTML中使用此代码：

<code class="codecontainer">
<pre>
<span class="lna">Line 1! This line is very long and goes beyond the container limits, so the content is scrolled horizontally...</span>
<span class="lnb">Line 2!</span>
<span class="lna">Line 3!</span>
<span class="lnb">Line 4!</span>
</pre>
</code>

然后是适用于它的一些风格：

code.codecontainer {
 display: block;
 overflow: auto;
 background: #fff;
}

code.codecontainer .ln1 {
 display: inline-block;
 width: 100%;
 background: #f2f2f2;
}

code.codecontainer .ln2 {
 display: inline-block;
 width: 100%;
 background: #f6f6f6;
}

问题在于，当我调整屏幕宽度（以测试移动支持）时，线条（＆＃34; .lna＆＃34;和＃34; .lnb＆＃34;）的宽度等于其父级（＆＃34; .codecontainer＆＃34;），这在某种程度上是合乎逻辑的。但是当我滚动父元素的条形时，我可以在滚动之前隐藏的部分中看到它的背景（白色）。我不知道如何制作＆＃34; .lna＆＃34;和＆＃34; .lnb＆＃34;获取整个空间的宽度，包括滚动条显示的部分。

我希望我没有弄乱所有人。谢谢！

Answer 1

如果您想考虑 jQuery 或仅 javascript 来解决此问题。

首先，获取由codecontainer上的溢出引起的滚动宽度。然后将codecontainer（在本例中为.lnb和.lna）内的元素宽度设置为滚动宽度。

像这样（ jQuery ）：

var overflowWidth = document.getElementById('codecontainer').scrollWidth;
$('.lnb').width(overflowWidth);
$('.lna').width(overflowWidth);

<强> SAMPLE in jsFiddle - jQuery

或

像这样（纯javascript ）：

var overflowWidth = document.getElementById('codecontainer').scrollWidth;
var lines = document.getElementsByTagName("span");
for (var i = 0; i < lines.length; i++) {
lines[i].style.width = overflowWidth +"px";
}

<强> SAMPLE in jsFiddle - javascript

块级元素未在x-scrollable DIV内完全展开

1 个答案: