0

I have a bunch of <li> nodes that need to float left. The total sum of the width of these nodes when float left are larger than their parent container. Instead of the width of the parent node increasing, the <li> expand the height of the parent and essentially flow down to the next line.

Is there a CSS solution to this issue or will I need a jQuery script to alter the size of the parent node based on how many children are in it?

4

4 回答 4

1

There is not a CSS solution. You can accomplish it with jQuery as you suggest though.

于 2012-12-04T18:22:14.180 回答
0

I'm not sure I'm 100% clear on what the issue is and what problem you would like to solve, but with only CSS:

You can keep the li's from stretching the height of the parent if you set a height on the parent equal to the height of the li's.

An overflow:hidden; on the parent might also be desired, unless you want scrollbars.

于 2012-12-04T18:28:32.043 回答
0

I think I understand what you're asking, but maybe not. Check this out. I went overboard on the CSS, but it just illustrates the point. 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; }​
于 2012-12-04T18:28:56.840 回答
0

The immediate parent of the floated elements should have display:inline-block property.

于 2012-12-04T18:32:55.493 回答