Question

我正在使用CSS position: fixed作为div标记。我的浏览器水平滚动条正在移动，但我没有看到文字。这是我到目前为止所尝试的：

<html>
<head>
    <style type="text/css">
    .test {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    overflow-x: auto;
    white-space: nowrap;
     width:2500px;
}
        body {
        }

    </style>
</head>
<body>
        <div class="test">
            test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data
        </div>

</body>
</html>

我需要用浏览器水平滚动条（不是div滚动条）在一行中显示文本

Answer 1

您可能希望溢出文本以创建滚动条。你必须让浏览器知道，它不应该破坏行。

.test {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    overflow-x: auto;
    padding: 10px;
    white-space: nowrap;
}

see my jsFiddle。我刚刚添加了背景和填充，因此它更好看。

Answer 2

由于您将宽度设置为2500px，因此它不会显示在浏览器视图中。所以，我添加了一个指定的高度并减小了宽度，以显示它们显示出来。同时将（x和y）设置为滚动 - 您可以根据需要随意调整它。

.test {
    position: fixed;
    width: 250px;
    height: 150px;
    overflow: scroll;
}

Answer 3

.test {
    position: fixed;
    width: 2500px;
    height:100%;
}

Answer 4

首先，如果您想使用div进行垂直滚动，则需要指定height。

.test {
  position: fixed;
  width: 2500px;
  height: 100%;
  overflow: scroll;
}

Answer 5

根据我的经验，有时您为class a: var = 0 @classmethod def incr(cls): print(cls.var) a.var += 1 class b(a): def f(self): super().incr() class c(a): def f(self): super().incr() cb = b() cc = c() cb.incr() cb.incr() cb.incr() cc.incr() cc.incr() cc.incr() cb.incr() cc.incr()中的一些0 1 2 3 4 5 6 7设置了子div，而该子div包含了将要滚动的内容。您应该将position: fixed;添加到子div。

如果没有在这种情况下添加此样式，它将无法正常工作。

Answer 6

您可以尝试以下方法：

<html>
<head>
    <style type="text/css">
    .test {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .2);
    white-space: nowrap;
     width:2500px;
}
        body {
        }

    </style>
</head>
<body>
        <div class="test">
            <p>test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data test data  test data  test datatest data  test data  test datatest data     test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test datatest data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data  test data</p>
        </div>

</body>
</html>

CSS位置：使用水平滚动条固定以溢出内容

6 个答案: