css - 第一个向右向左导航

Question

如何将 other 更改为右侧？

li{
    display: inline;
}
#main{
    float: left;
}
#other{
    float: left;
}

<nav id="other">
  <ul>
    <li>other</li>
    </ul>
</nav>
<nav id="main">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    </ul>
</nav>

应该是这样的:

one two three other

但不是这样的:

one two three             other

PS:我无法更改html。

我知道这可以通过绝对定位来完成，但是对于响应式设计来说这会非常昂贵。因此寻找其他解决方案。

Answer 1

实现此目的的一种快速方法是放入一个向左浮动的包含元素，然后将两个 ul 都向右浮动。当 #other 先出现时，它将首先 float 。

ul {
  margin: 0;
  padding: 0;
  margin-right: 5px;
}
li {
  display: inline;
}
#main,
#other {
  float: right;
}
div {
  text-align: left;
  float: left;
  display: inline;
}

<div>
  <nav id="other">
    <ul>
      <li>other</li>
    </ul>
  </nav>
  <nav id="main">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </nav>
</div>