借助CSS（或JQuery？）自动调整宽度

我有一堆需要向左浮动的

节点。当float left大于其父容器时，这些节点宽度的总和。父节点的宽度不是增加，而是扩展父节点的高度，基本上向下延伸到下一行

---

是否有解决此问题的CSS解决方案，或者我是否需要一个jQuery脚本来根据父节点中有多少子节点来更改父节点的大小？

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

我不确定我是否100%清楚问题是什么以及您希望解决什么问题，但仅使用CSS：

如果在父对象上设置的高度等于li的高度，则可以防止li拉伸父对象的高度

---

溢出：隐藏；除非您想要滚动条，否则也可能需要在父屏幕上显示。我想我理解您的要求，但可能不理解。看看这个。我在CSS上做得太过火了，但它只是说明了这一点

---

浮动元素的直接父元素应该有

display:inline block

属性。

你能用一个例子快速解释一下你的意思吗？是的……我有点明白了。糟糕，谢谢你的努力。我不喜欢所有css，除了

驻留在没有定义宽度的

中，但该节点的父节点具有定义的宽度。问题是当

的浮动向左时，宽度是从“祖父母”节点继承的。clearfix会解决这个问题吗？（）浮动元素存在于DOM流之外，因此不考虑它们的高度和宽度。不，我总是使用ghost

clear

div。问题不一定与float本身有关，而是与父容器的大小有关。它也都在一个Joomla模板中，这个模板有自己定义的宽度。如果你检查这个，然后转到“为什么很糟糕”部分，你就会明白我的意思。你要求一个CSS解决方案，就是这样。处理跨浏览器问题（IE7是以前的版本）完全不同。这种方法的固有缺陷就是我正在处理的问题。你只是重复了我的问题。如果你看看我给你的链接，它在标题下，“巨大的缺点”。寒冷

<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; }​