Question

好的，请考虑以下jsfiddle.

我想浮动一个无序的<li>＆gt;列表对。如果我没有像小提琴那样指定宽度，那么一定数量的<ul>将在同一行上，直到一个跳到下一行。

如果我给<ul>一个宽度，就像this fiddle一样，你可以看到<ul>向后跳“向左”。我希望能够将<div>宽度设置为包含<li>的100％，同时仍然将订单项<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%; } s“右”浮动。

process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0";

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>

Answer 2

删除float:left上的li，不要使用百分比填充。

请参阅此fiddle

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

li {
    padding-right: 1em;
}

Unordeded list float右折叠

2 个答案: