CODEWITHSUNDEEP
htmlcss
Ross
Ross

Reputation: 1425

Display li's across 100% of screen width, and allow for wrapping to next line

So i'm trying to create some HTML/CSS that will allow for a row of li elements to fill 100% of the width of a page. The content within each li is dynamic so can be of variable width (normally one or two words). Each li section needs to also be the width of the content, not equal.

I'm currently using display:table and display:table-cell to do this which can be seen in the jsFiddle.

ul {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

ul li {
    display:table-cell;

}

http://jsfiddle.net/fHL7y/3/

However when the width of the page is changed (drag the bar over on jsFiddle) the items bunch up and go off screen. Is there anyway using CSS that the li's can flow down onto the next line below, like they would if they were floated left but still be spaced out within 100% of the screen width?

Upvotes: 1

Views: 1410

Answers (3)

Chris
Chris

Reputation: 342

How about

.floatcss li {  
    display: inline-block;
    left: auto;
    right: auto; 
    min-width: 19%;
}

Upvotes: 1

Tim Hettler
Tim Hettler

Reputation: 1256

They can't be spaced out within 100% of the screen width and also float to the next line; you're asking for 2 mutually exclusive layouts.

If you want the li's to be spaced out within 100% of the screen width UNTIL a certain page width is met, you can use media queries.

ul {
    list-style:none;
    padding:0;
    margin:0;
    display:table;
    width:100%;
    text-align:center;
}

ul li {
    display:table-cell;

}

@media (max-width: 599px) { //Everything in here activates when window is less than 600px
    ul {
        display:block;
    }

    ul li {
        display:block;

    }
}

Upvotes: 1

Travis
Travis

Reputation: 2245

Try this

http://jsfiddle.net/fHL7y/4/

.floatcss {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:center;
word-wrap:break-word;/* Added this */
 }

.floatcss li {
float:left;
width:100%; /* Added this */
 }

Upvotes: 1

Related Questions