html - 如何将语义用户界面菜单更改为 RTL

Question

我尝试将 semantic-ui 菜单组件更改为从右到左，但是 semantic-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>

Answer 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>