带有选项卡按钮 rtl 的页面导航中的 html

Question

我有一个带有 bootstrap css 的 HTML 表单，当我按下键盘上的 Tab 按钮时，将从屏幕左侧开始到右侧选择字段(就像在ltr站点中通常发生的那样)。 我希望从页面的右到左选择字段。 我的所有网站都已分配给 rtl(在 html 标记处使用 dir="rtl"属性)

我已经取消了所有 dir="ltr"元素

我想知道什么是正确的 css 属性，可以将页面内导航从右向左转换，正如本网站中发生的那样 http://business.jeeran.com/ .

TNX

Answer 1

就您所显示的网站而言，它是按照您在页面中按 Tab 键的顺序构建网站的情况，并结合 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;
}

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

通过将 .col-sm-4 上的 float: left; 更改为 float: right;<，可以对联系我们表单执行相同的操作