CODEWITHSUNDEEP
htmlcss
Ahmar Ali
Ahmar Ali

Reputation: 1068

CSS Make list-items totally responsive

I am facing a weird problem. I have an un-ordered list of images. List has 4 Items. I want to include it in responsive page and all I want is that all items should have a 25% width and the list itself should span the width of whole screen. Well it all sounds easy and straight-forward but for some odd reason I can't assign 25% width to the list-items and only three items accommodate in one line if I assign width:25%.

If I reduce the width to 24.4% the items are in line. But then again weirdly when I resize browser one of the item goes into 2nd line.

I am using Google chrome. Here is the HTML:

<ul class="imgs">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
        <li>dddd</li>

        </ul>

Here is the CSS:

.imgs {
width: 100%;
list-style: none;
margin: auto;
    padding:0px;
}
.imgs li {
width: 24.4%;
margin: 0px !important;
padding: 0px !important;
display: inline-block;
}

And here is the Fiddle Demo: http://jsfiddle.net/7HXw7/2/

Upvotes: 4

Views: 14061

Answers (2)

Konrad Wąsowicz
Konrad Wąsowicz

Reputation: 432

Try adding:

float: left;

to .imgs li

Fiddle

Upvotes: 2

ezekielDFM
ezekielDFM

Reputation: 1977

WIth inline-bock elements, the browser will interpret the space between the li's as actual spaces and that's why your elements aren't lining up. If you just remove the space, it'll line up. See code:

<ul class="imgs"><li>aaaa</li><li>bbbb</li><li>cccc</li><li>dddd</li></ul>

Or the fiddle, here: http://jsfiddle.net/dgvc9/

Alternately, if you find this as annoying as would think you do, you can make the li's block elements and float them left.

See alternate fiddle: http://jsfiddle.net/8Gxvd/

Upvotes: 4

Related Questions