• Geek asks and answers

    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 may vary. What should be the width property for all images.
    I tried - automatically - and expected a variable width - but it is not.

    +5
    source share
    5 answers

    Make items li inline-blockand set property white-spacevalue ulon nowrap.

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

    Make these changes, I think they 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>
    +2
    source

    , , . ,

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

    ul (width X 3) + (2 X image-border-if-any} + padding= 2100px + n

    +1

    try jquery, so in the css file you can put 0 and the value will be changed 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>
    0
    source

    You just put the width property on the ul element.

    0
    source

    More articles:


    All Articles