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

时间:2014-10-09 07:27:10

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

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

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

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

TNX

2 个答案:

答案 0 :(得分:1)

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

实施例

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

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

答案 1 :(得分: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


另一种选择是使用tabindexTabindex设置项目的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;

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