html - 如何使 <div> 扩展以将大量 <li> 元素包含在 <ul> 中？

Question

我有以下 HTML:

<div class="columns">
   <ul class="controls-buttons">
       <li><a data-href="/xx" id="btn-1" Topic 50.5">1</a></li>
       ...
       <li><a data-href="/yy" id="btn-2" Topic 50.5">2</a></li>
   </ul>
</div>

CSS:

ul.controls-buttons {
   float: right;
}

li {
   height: 1.8em !important;
   margin-left: 0.7em !important;
   padding: 0.333em 0.29em !important;
}

ul.controls-buttons li {
   display: block;
   float: left;
   margin: -1px 0 -1px 0.5em;
   line-height: 1.333em;
   padding: 0.333em 0.25em;
}

大约有 100 个按钮，它们在封闭的边界之外流动 <div class="columns"

有没有办法让我制作<ul>占用空间所以<div>展开以包围它？

Answer 1

添加<div class="columns" style="overflow: hidden;">然后它将占据与它内部的 float 相同的空间。