0

我有以下 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>扩大以包围它？

4

4 回答 4

2

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

于 2013-09-02T13:36:39.607 回答
2

我想overflow:hidden;你div.column会解决你的问题

更多知识 ::来源

溢出：隐藏；该值表示内容被剪裁，并且不应提供滚动用户界面来查看剪裁区域之外的内容。

于 2013-09-02T13:37:01.490 回答
0

如果你没有，你应该浮动 div。如果您在 div 内部浮动一些东西，而不是 div 本身，这可能会导致重叠问题。在您的情况下，列表高于 div

于 2013-09-02T13:34:37.867 回答
0

这个 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;
   width:100%
}
于 2013-09-02T13:42:29.427 回答