5

我现在正在创建一个站点，我需要为<pre>带有语法突出显示和行号的标签提供支持（我为此使用了 GitHub Gists，但这没关系）。

问题是，我的网站是响应式的，我无法为我的 in a分配静态width属性 ，因为可以调整表格的大小。<pre><td>

如果你想看一个活生生的例子，这里是我创建的例子来告诉你我在说什么：http: //jsfiddle.net/akashivskyy/jNRrn/。

如果你不想搬到任何地方，这里有一个简短的解释......

我的基本树如下所示：

<div class="file">
    <table class="source">
        <tr>
            <td class="lines">
                <span class="line-number">1</span>
                <span class="line-number">2</span>
                <span class="line-number">3</span>
            </td>
            <td class="code">
<pre>NSString *title = @"Title";
NSString *title2 = [title stringByAppendingString:@"This is a very very long string"];
NSLog(@"%@", title2);</pre>
            </td>
        </tr>
    </table>
</div>

还有非常基本的 CSS：

.file {
    overflow: hidden;
    width:340px;
}

td.code pre {
    overflow: auto;
}

那是行不通的，因为<pre>没有width财产。我设法以某种方式允许滚动的唯一方法是申请overflow: auto我的.file班级：

.file {
    overflow: auto;
    width:340px;
}

td.code pre {
    overflow: auto;
}

但这并不能让我满意，因为整个表格都在滚动，我希望行号（第一个<td>）保持不变。

现在你明白了。我的问题是：有没有一种方法可以在不通过一些棘手的类似脚本为我的元素分配静态属性的情况下实现我的结果？width<pre>responsive.js

4

1 回答 1

2

如果您希望行号保持不变.. 让它们绝对定位如何？并在代码中添加适当的填充。

/* your previous solution */
.file {
    overflow: auto;
    width:340px;
}
td.code pre {
    overflow: auto;
}
/* + add this */
td.lines {
    position:absolute;
}
td.code{
    padding-left:20px;
}
于 2013-05-10T09:18:43.257 回答