Question

我尝试过如下：

<!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

Answer 1

您可以这样做使用此样式设置div：

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

然后给出这种风格的范围：

 <span  style="direction: ltr;">

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

Answer 2

我从来没有意识到存在这样的事情。

我编辑了你的代码（并把它放在一个jsbin中）。我改变的是以下内容：

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

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

在这里，您可以看到有效的jsbin

Answer 3

删除direction: rtl;，它将解决您的问题

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

3 个答案: