How to adjust ul width property?

Question

<ul id='ul01'>
    <li><a href='#'><img src='img01.png' width="700" height="590" /></a></li>
    <li><a href='#'><img src='img02.png' width="700" height="590" /></a></li>
    <li><a href='#'><img src='img03.png' width="700" height="590" /></a></li>
</ul>

CSS:

#ul01{list-style:none;width:??;}
#ul01 li{float:left;}

This is a horizontal array of images. list.items.count can vary.
What should be the width property to fit all images.
I tried with - auto - and expected resizible width - but it's not.

I want to adjust ul width to fit all images. Number of images varies. List should stay horizontal, not vertical. — Alice, Jul 17 '12 at 10:20
So the page width can grow (to infinity?) and you're fine with horizontal scrolling? — jfrej, Jul 17 '12 at 10:21
Check [magicalex's](http://stackoverflow.com/a/11520529/1047823) answer. — Christoph, Jul 17 '12 at 10:26

score 13 · Accepted Answer · answered Jul 17 '12 at 10:23

13

Make the li elements inline-blocks and set the white-space property of the ul to nowrap.

li {
    display: inline-block;
}
ul {
    white-space: nowrap;
}

answered Jul 17 '12 at 10:23

magicalex

917
7
11

score 2 · Answer 2 · edited Jul 17 '12 at 10:16

2

Make these change i think these will work for you...

#ul01{list-style:none;width:100%;}
#ul01 li{float:left; width:33%; }
#ul01 li a { display:block; }
#ul01 li a img { width:100%; height:auto; }

<ul id='ul01'>
    <li><a href='#'><img src='img01.png' /></a></li>
    <li><a href='#'><img src='img02.png' /></a></li>
    <li><a href='#'><img src='img03.png' /></a></li>
</ul>

edited Jul 17 '12 at 10:16

thirtydot

224,678
48
389
349

answered Jul 17 '12 at 10:13

SaurabhLP

3,619
9
40
70

but the OP has a fixed image height and width – codingbiz Jul 17 '12 at 10:15
that didnt matter but the benefit is image with any size will adjust for that – SaurabhLP Jul 17 '12 at 10:18
You can't offer a pig while the OP wants a cow and say "it doesn't matter you can eat both" – Christoph Jul 17 '12 at 10:20

score 1 · Answer 3 · answered Jul 17 '12 at 10:24

if your images have to retain the sizes you specified then know that your page will have horizontal scrollbar. If you prefer that this will work

#ul01{list-style:none;width:2100px;}
#ul01 li{float:left; width:700px}

The ul width has to be the (width X 3) + (2 X image-border-if-any} + padding = 2100px + n

score 0 · Answer 4 · answered Jul 17 '12 at 10:13

try jquery, so in css file you can put 0, and value would be change later.

<script type="text/javascript">
  $(document).ready(function () {
    var sum = 0;
    $('#ul01 li img').each(function() {
      sum += parseInt($(this).attr("width"), 10);
    });
    $('#ul01').css({ 'width': sum+'px' });
  });
</script>

score 0 · Answer 5 · answered Jan 10 '13 at 23:31

0

You just put width property to ul element.

answered Jan 10 '13 at 23:31

Meigo62

163
1
2
12

How to adjust ul width property?

5 Answers5

Linked