html - 无序列表向右浮动折叠

Question

好的，考虑以下 jsfiddle.

我想 float 一个无序的 <ul > 正确列出。如果我没有指定宽度，就像在 fiddle 中那样，那么一定数量的 <li> s 将在同一行，直到 one 跳到下一行。

如果我给出 <ul>宽度，如 this fiddle , 你可以看到 <ul> “向左”跳回。我希望能够设置 <ul>宽度高达 100% 的包围 <div>同时仍然有订单项 <li> s“右” float 。

<div>
    <ul>        
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
    </ul>      
</div>

ul {
    float: right;
    list-style: none;
}

li {
    float: left;
    padding-right: 1%;
}

Answer 1

在这种情况下，内联列表会更容易。

div {
  background-color: rebeccapurple;
}

ul {
  display: block;
  padding: 4px 20px;
  text-align: right;
}

li {
  display: inline-block;
}

a {
  color: white;
  font: 14px/1.6 sans-serif;
  text-decoration: none;
}

<div>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</div>