html中的项目对齐答案

【问题标题】：Item alignment in htmlhtml中的项目对齐
【发布时间】：2015-10-18 18:50:40
【问题描述】：

我的基于 html 引导的页面中有一个导航栏，其中包含以下项目：

item7 item6 item5 item4 item3 item2 item1

它是波斯语，应该从右到左排列。

当它在手机上加载时，它会显示如下项目：

 - item7
 - item6
 - item5
 - item4
 - item3
 - item2
 - item1

我怎样才能以这种方式排列它们：

 - item1
 - item2
 - item3
 - item4
 - item5
 - item6
 - item7

css：

element.style {
    text-align: right;
}
.navbar-nav {
    margin: 7.5px -15px;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

【问题讨论】：

查看stackoverflow.com/questions/30890735/…
@Amitsingh - 我认为这与张贴者的要求没有任何关系......他询问的是物品的顺序，而不是样式。另外，你怎么知道发帖人没有在他的ul 标签中使用那个类？

标签： html css twitter-bootstrap

【解决方案1】：

不要在标记中从右到左排列列表项。保持原样；

  <ul class="nav navbar-nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
  </ul>

然后，将较大屏幕尺寸的 .navbar-nav > li 的 Bootstrap 样式覆盖为 float-right。

@media (min-width: 768px) {
    .navbar-nav > li {
        float: right;
    }
}

这样，在大屏幕尺寸上，当nav 水平显示时，它会颠倒您的顺序。但是，在较小的屏幕尺寸上，当列表项折叠时，它们将在垂直显示时保持原始顺序。

演示：http://jsfiddle.net/abhitalks/jwcagnwv/

【讨论】：

【解决方案2】：

我建议按照 @Abhitalks 的建议保持标记的语义顺序，但在文档级别使用 RTL（从右到左）。

这样一来，您就完全不用摆弄花车了。

有一些用于 Bootstrap 的 RTL 插件可以让您更轻松，例如morteza's.

【讨论】：

【解决方案3】：

嗨，伙计，我认为正常通过应用 float : li's 的右侧然后你可以实现你的方式。

你可以像这样应用它们

(your selector or ul ) li{
float : right;   //apply additional css styles
}

【讨论】：