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

【问题标题】：html in page navigation with tab button rtl带有标签按钮 rtl 的页面导航中的 html
【发布时间】：2014-10-09 07:27:09
【问题描述】：

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

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

我想知道什么是正确的 css 属性，它可以将页面内导航从右向左转变，就像在此站点 http://business.jeeran.com/ 中发生的那样。

TNX

【问题讨论】：

我正在使用这个引导模板gettemplate.com/demo/progressus/index.html。如果我确实浮动：就在 css 处不会转动字段标记顺序。
我已经为你编辑了我的答案，以适用于那个确切的主题。

标签： html css twitter-bootstrap right-to-left

【解决方案1】：

对于您显示的网站，它是按照您在页面中切换的顺序构建网站的情况，并结合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 设置项目的标签顺序。但是，与上述方法相比，这更像是一种手动方式。

这种方法的一个例子：

<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; 来处理联系我们表单

【讨论】：

【解决方案2】：

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

例子

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

使用 Tab 可以从右到左选择 div。

【讨论】：

o.k 是否可以不使用 tabindex？ bootstrap rtl defult nab 是 rtl wihout 使用 tabindex