8

長いリストを避けるために、liをfloat：leftに設定して、行が交互になるようにしました。ただし、これにより、liのコンテンツが2行を占める場合に、要素間に意図しないギャップが生じることがあります。私のHTMLは次のとおりです。

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

私のCSSは次のとおりです。

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

そして、出力はhttp://allesoveritaliaanseten.nl/ragu-alla-bolognese/のようになります

ただし、liが2行を占め、出力がhttp://allesoveritaliaanseten.nl/italiaanse-tomatensoep/のように問題ない場合もあります。

それらのギャップを示すリストを停止するにはどうすればよいですか？

4

2 に答える 2

4

css3 を使用すると、リストに列を追加できます

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

li からフロートを削除することを忘れないでください

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

IE の問題 CSS 列は IE では機能しないようです。float:left をそのままにしておくと、IE のように見えますが、他のブラウザーでは見栄えが良くなります!

css-columns の詳細については、w3schoolsのこの記事をご覧ください。

于 2013-01-21T13:10:52.667 に答える
1

http://www.csscripting.com/css-multi-column/を使用することをお勧めします

私はこのスクリプトを長い間使用していますが、利用可能な他の可能性と比較して非常に効率的です。サイトが AJAX で完成している場合は、次の行を変更する必要があります: ut.XBrowserAddEventHandler(window,'load',function() { documentReady = true; processElements(); } );

編集: このソリューションは、IE6 以降のどのブラウザーでも機能します...

于 2013-01-21T13:05:05.263 に答える