如何在左侧制作垂直滚动条，水平滚动条应从底部的左侧开始。

Question

如何在左侧制作垂直滚动条，水平滚动条应从底部的左侧开始。

3

我已经尝试了以下操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
    <div
        style="height: 100px; direction: rtl; overflow: auto; width: 150px;">
        <span style="direction: ltr;">
            <table>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
                <tr>
                    <td>Test1</td>
                    <td>Test2</td>
                    <td>Test3</td>
                    <td>Test4</td>
                </tr>
            <table>
        </span>
    <div>
</body>
</html>

以上代码在左侧显示垂直条，但底部水平条从右侧开始。有人能帮我让底部水平条从左侧开始吗？

根据以上代码，图像如下所示：

Getting This

我想默认情况下获得以下图像：

Require this

- user3914257

不可能吗？我没有从任何提供的评论中解决它。 - user3914257

3个回答

0

我甚至从未意识到这样的东西存在。

我已经编辑了你的代码（并将其放在jsbin中）。我改变的是以下内容：

<div style="height: 100px; direction: rtl; overflow: auto; width: 150px;">
    <div style="direction: ltr; width: 150px; overflow: auto;">

我已将span更改为div（因为它默认是块元素）。第一个div处理垂直滚动条，应该是从右到左模式。第二个div处理水平滚动条，需要默认设置。

在这里您可以看到一个工作的jsbin。

- Sander Koedood

1

在你的 jsbin 上，我的底部滚动条从右侧开始（如果有影响的话，我使用的是 Chrome）。 - Sifu

师傅，是在什么操作系统下？我的Mac上的Chrome（Canary）总是从左边启动。 - Sander Koedood

Windows XP。Chrome版本36.0.1985.125。在Aurora（Firefox）和IE8上相同。 - Sifu

你说得对。这确实会在Windows上发生。很奇怪，谢谢提醒！ - Sander Koedood

即使跨平台，格式仍然存在差异，这真是奇怪。HTML/CSS格式有时真的很烦人。 - Sifu

0

移除 direction: rtl; 就可以解决你的问题

- Ashish Balchandani

如果我删除 direction: rtl;，垂直滚动条将出现在右侧，而我不想要这样。 - user3914257

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TyBourque · Accepted Answer

你可以使用以下样式来设置 div：

 height: 100px; direction: rtl; overflow: auto; width: 150px;

然后给 span 应用这个样式：

 <span  style="direction: ltr;">

这将把垂直滚动条放在左侧，并将水平滚动条设置为左侧