CODEWITHSUNDEEP
htmlcss
Alice
Alice

Reputation: 633

How to adjust ul width property?

<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.

Upvotes: 11

Views: 37619

Answers (5)

Meigo62
Meigo62

Reputation: 183

You just put width property to ul element.

Upvotes: 0

codingbiz
codingbiz

Reputation: 26386

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

Upvotes: 1

magicalex
magicalex

Reputation: 937

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;
}

Upvotes: 15

SaurabhLP
SaurabhLP

Reputation: 3657

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>

Upvotes: 2

miszczu
miszczu

Reputation: 1189

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>

Upvotes: 0

Related Questions