如何将语义 UI 菜单更改为 RTL答案

【问题标题】：how to change semantic-ui menu to RTL如何将语义 UI 菜单更改为 RTL
【发布时间】：2015-07-18 21:18:49
【问题描述】：

我尝试将语义 ui 菜单组件更改为从右到左，但语义 ui 将 flex 用于菜单和任何其他组件，我尝试将此菜单从右到右

<div class="ui secondary menu">
  <a class="active item">
    Home
  </a>
  <a class="item">
    Messages
  </a>
  <a class="item">
    Friends
  </a>
</div>

当为第一个“a”标签菜单插入“left”类时，菜单浮动到右边，但第一个标签仍在左侧

<div class="ui secondary menu">
  <a class="active item left">
    Home
  </a>
  <a class="item">
    Messages
  </a>
  <a class="item">
    Friends
  </a>
</div>

【问题讨论】：

stackoverflow.com/questions/30694201/…

标签： html css semantic-ui

【解决方案1】：

最好的选择是在 HTML 中使用dir 属性。

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.min.css" rel="stylesheet" />
<div class="ui secondary menu" dir="rtl">
  <a class="active item">
    Home
  </a>
  <a class="item">
    Messages
  </a>
  <a class="item">
    Friends
  </a>
</div>

【讨论】：

【解决方案2】：

创建一个自定义类.rtl 并使用flex-direction 到row-reverse，从右到左表示菜单。

.rtl {
  flex-direction: row-reverse;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.min.css" rel="stylesheet" />
<div class="ui secondary menu rtl">
  <a class="active item">
    Home
  </a>
  <a class="item">
    Messages
  </a>
  <a class="item">
    Friends
  </a>
</div>

【讨论】：