CODEWITHSUNDEEP
css
Ray
Ray

Reputation: 4108

How to display inline several <li> with 100% width when browser size changes?

I want to display li element with 100% of the viewport size. I found the solution from the question here, however it is not sufficient with my need, that is, I also want li element stay with 100% width even though browser size changes. Is it possible using only pure css? or do I need to use additional javascript code? Thanks.

Upvotes: 0

Views: 108

Answers (1)

Dave Loepr
Dave Loepr

Reputation: 956

I put the other post in a fiddle to check, and it is working fine for me, are you sure you use all the correct parameters ?

div {overflow:auto;width:100%;}
ul {margin:0;padding:0;white-space:nowrap;}
li {width:100%;display:inline-block;}

http://jsfiddle.net/PDVEM/1/

Edit : To answer your comment, i'm not sure it is possible to synchronize scrollbar position and window size with pure css (maybe using some text-align:center; tricks), but IT IS possible with javascript :

//store the current scroll value
div.scroll(function(){
    currentScrollPos = div.scrollLeft();
    currentLi = (currentScrollPos/divWidth);
})

//on resize re-positions the scrollbar        
$(window).resize(function(){
     divWidth = parseInt(div.css('width'));
     newScrollPos = currentLi*divWidth;
     div.scrollLeft(newScrollPos);
})

See this fiddle for full example :

http://jsfiddle.net/PDVEM/3/

Upvotes: 1

Related Questions