Question

我有一个带有bootstrap css的HTML表单，当我按下键盘上的Tab键时，从屏幕左边开始选择字段到右边（因为它通常发生在ltr站点）。我希望从页面的右侧到左侧选择字段。我的所有网站都已分配到rtl（使用dir =＆＃34; rtl＆＃34; html标记处的属性）

我取消了所有的dir =＆＃34; ltr＆＃34;元素

我想知道什么是正确的css属性，可以在此网站http://business.jeeran.com/中从右向左转换页面导航。

TNX

Answer 1

TabIndex是您需要的财产。具有DESCENDING TabIndex的对象将从右到左选择。

实施例

<div tabindex="3"></div><div tabindex="2"></div><div tabindex="1"></div>

使用Tab键，您将从右到左选择div。

Answer 2

如果是您展示的网站，则可以按照您在页面中标记的顺序构建网站，并结合float: right;。 float: right;导致项目从右向左显示，使得最正确的项目成为HTML中加载的第一个项目。

如果您能够以这种方式更改网站的布局，则可以采用相同的方式执行此操作。

这方面的一个例子是：

<ul class="navigation">
    <li><a href="#">First item</a></li>
    <li><a href="#">Second item</a></li>
    <li><a href="#">Etc.</a></li>
</ul>

通过添加以下CSS，第一项将位于最右侧，下一项显示在其左侧。

.navigation li {
    float: right;
}

有关示例，请参阅此fiddle。

另一种选择是使用tabindex。 Tabindex设置项目的Tab键顺序。但是，与上述方法相比，这更像是一种手动方式。

此方法的一个示例：

<ul class="navigation">
    <li><a href="#" tabindex="3">Last item</a></li>
    <li><a href="#" tabindex="2">Second item</a></li>
    <li><a href="#" tabindex="1">First item</a></li>
</ul>

并fiddle显示其工作原理

修改

在评论中查看主题时，这意味着要更改以下CSS

.navbar-nav>li {
    float: left;
}

向右浮动：

.navbar-nav>li {
    float: right;
}

这将导致主菜单被反转，如第一个示例中所示。如果这可以解决您的问题，请告诉我。

将float: left; .col-sm-4更改为float: right;

，可以对联系我们表单进行同样的操作

页面导航中的html，带有标签按钮rtl

2 个答案:

修改