Question

我有一堆需要向左浮动的<li>个节点。浮动左侧时这些节点的宽度总和大于其父容器。而不是父节点的宽度增加，<li>扩展父节点的高度，并基本上向下流到下一行。

是否有针对此问题的CSS解决方案，还是我需要一个jQuery脚本来根据父节点的大小来改变父节点的大小？

Answer 1

没有CSS解决方案。你可以按照你的建议使用jQuery来完成它。

Answer 2

我不确定我是100％清楚问题是什么以及你想解决什么问题，但只有CSS：

如果您将父级的高度设置为等于li的高度，则可以保持li不会拉伸父级的高度。

溢出：隐藏;除非你想要滚动条，否则也可能需要在父级上。

Answer 3

我想我明白你在问什么，但也许不是。看一下这个。我在CSS上过分了，但它只是说明了这一点。 Here's a Fiddle.

<div class="navItems">
    <div class="navOutline">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <!-- Add more items and it'll expand -->
            <li><a href="#">Item 5</a></li>
        </ul>
    </div>
</div>

.navItems ul { list-style:none; margin:0; padding:0; }
.navItems li { display:inline; }
.navItems li:not(:last-child) { margin-right:10px }
.navItems .bumper { margin-right:15px; }
.navItems {
    float:left;
    font-size:14px;    
    padding:5px;
    background:#FFF;
    box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -o-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -ms-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -moz-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
    -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.25);
}
.navOutline {
    margin:auto auto;
    padding:10px;
    background:#FFF;
    border:1px dashed #CCC;
}
.navItems a { text-decoration:none; color:#000; }

Answer 4

浮动元素的直接父元素应具有display:inline-block属性。

在CSS（或JQuery？）的帮助下自动宽度？

4 个答案: