Question

我有一个最大大小为176px的列表。如果项目溢出，我希望它们环绕ul容器。如果它们没有溢出，我希望ul调整到宽度。

在我的示例中，第一个列表溢出，并包围最大容器大小。正是我想要的！第二个列表不会溢出。所以容器需要更小，需要调整到列表的大小。我添加了最大宽度，没有成功。

如何使我的第二个列表容器的宽度与列表一样宽？

var y = [ '9145001323', '08:00', '12:00' ]

var t1 = moment.utc(y[1], "HH:mm");
var t2 = moment.utc(y[2], "HH:mm");
var now = moment.utc();
if( now.isAfter(t1) && now.isBefore(t2) ){
   console.log(" in range ");
}

ul {
  padding: 0;
  margin: 0;
}

.flagMenu {
  border: 1px solid red;
  max-width: 176px;
  white-space: wrap;
}

.flagMenu li {
  display: inline-block;
}

Answer 1

将display: inline-block添加到您的ul元素中。

无序列表元素默认是块级元素，因此它们总是会出现在新行上，并占用整个可用宽度。通过将该display属性更改为inline-block，您可以覆盖该默认行为..

＆＃13;

ul {
  padding: 0;
  margin: 0;
  width: auto;
  display: inline-block
}

.flagMenu {
  border: 1px solid red;
  max-width: 176px;
  width: auto;
  white-space: wrap;
}

.flagMenu li {
  display: inline-block;
}

＆＃13;

<ul class="flagMenu">
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
</ul>

<br><br>

<ul class="flagMenu" style="width: auto;">
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
    <li><a href=""><img src="" width="16" height="11" alt=""></a></li>
</ul>

＆＃13;

如何使用max-width容器包装列表

1 个答案: