Gap between
  • s
  • 2019-04-23 14:26发布

    问题:

    To avoid long lists I've got my li set to float: left so that they alternate rows. However, on occasion this causes an unintentional gap between elements when the content in a li takes up two lines. My HTML is:

    <ul class="gmc-ingredient-list">                                   
    <li>500g Tagliatelle</li>                                                                   
    <li>50g wortel</li>                                 
    <li>50g ui</li>                                  
    <li>50g bleekselderij</li>                                  
    <li>100g pancetta</li>                                  
    <li>200g half-om-half-gehakt</li>                                  
    <li>200g rundergehakt</li>                                  
    <li>200 ml Primitivo (rode wijn)</li>                                  
    <li>200ml runderbouillon</li>                                  
    <li>5 eetlepels tomatenpuree</li>                                  
    <li>Olijfolie</li>                                  
    <li>Zeezout</li>                                  
    <li>Verse peper</li>                                             
    </ul>
    

    My CSS is:

    ul.gmc-ingredient-list { 
    margin: 0; 
    padding: 0;
    list-style: none; 
    width: 300px; 
    }
    
    ul.gmc-ingredient-list li { 
    background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent; 
    list-style: none outside none;
    padding: 0px 0 0 20px; 
    width: 130px; 
    float: left;
    }
    

    And the output looks like http://allesoveritaliaanseten.nl/ragu-alla-bolognese/

    But there are also some cases in which a li takes up two lines and the output is just fine like http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/

    How can I stop the list showing those gaps?

    回答1:

    With css3 you can add columns to your lists

    ul.gmc-ingredient-list {
        margin: 0;
        padding:0;
        -moz-column-count: 2;
        -moz-column-gap: 0;
        -webkit-column-count: 2;
        -webkit-column-gap: 0;
        column-count: 2;
        column-gap: 0;
        width:300px;
    }
    ul.gmc-ingredient-list li {
        background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
        list-style: none outside none;
        padding: 0px 0 0 20px;
        width:130px;
    }
    

    don't forget to remove the float from the li

    Example: http://jsfiddle.net/LWBdp/3/

    IE Problems CSS columns don't seem to work for IE, if you leave the float:left in there it will look like you had in IE but will look better in the other browsers!

    For more information about css-columns take a look at this article at w3schools



    回答2:

    I would recommend you using http://www.csscripting.com/css-multi-column/

    I use this script for a long time now and it's really efficient compared to other possibilities available. If your site is done with AJAX, you will have to modify this line: ut.XBrowserAddEventHandler(window,'load',function() { documentReady = true; processElements(); } );

    EDIT: This solution is working on any browser since IE6...