• Geek Answers Handbook

    How to specify the distance between list items?

    I want to set a distance of 20 pixels between each list.

    HTML:

    <div id="folio"> <ul> <li><img src=""></li> <li><img src=""></li> </ul> </div> 

    CSS

     #folio { width:1200px; } #folio ul li { width:588px; height:273px; display:inline-block; background:#cf5b6f; border:1px solid #8e1028; list-style:none; } 

    How can i do this?

    +4
    html css
    Muzammil May 13, '11 at 23:57
    source share
    2 answers

    As @Paul said, you should add:

     #folio ul li{ margin:0 20px 20px 0; vertical-align:top} 

    Due to the use of display: inline-block you must also remove spaces in your HTML, for example:

     <div id="folio"> <ul> <li><img src=""></li><li><img src=""></li><li><img src=""></li><li><img src=""></li> </ul> </div> 

    I also added another width and then overflow: hidden in #folio to hide the extra margin .

    See: http://jsfiddle.net/Brnsg/3/

    +8
    thirtydot May 14, '11 at 0:11
    source share

    folio ul li { margin: 0 20px 20px 0; } folio ul li { margin: 0 20px 20px 0; } should do the trick. Also, correct me if I'm wrong, but with display: inline-block; whether to add vertical-align: top; to align the fields?

    +4
    paulruescher May 14 '11 at 12:03
    source share

    More articles:

    • Reactive structure eliminates while loop in Observable.Create - c #
    • Stop jQuery events firing during current firing? - javascript
    • https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=ru&sp=nmt4&tl=en&u=https://fooobar.com/questions/1352682/what-is-a-good-list-of-resources-to-learn-system-security&usg=ALkJrhgvX9AksS1YNCFrgk4wQ-MPhA-t-g
    • I would like to create an array from a list, but keep NaNs and infs - python
    • The fastest way to decode and display many H264 videos simultaneously C # - optimization
    • how can i rotate a figure in canvas, html5? - javascript
    • Positioning an image outside a div - html
    • in java webapp, hsqldb url will not accept relative path. is it because of maven configuration? - spring
    • Can't read the value of the 'w90> property? - javascript
    • Errors embedded in vectors <> inside vectors <> - c ++

    All Articles

    Geek Answers | 2019