如何在我的页脚的每10个List项目之后创建一个新行

Question

I want to break my list items to second column within a particular width so that if its 100 list items then it will create 5 column and 20 raw.

something looks like http://www.huffingtonpost.com/ (LINKS)

My CSS is :

.footer-item {
float: left;
width: 31%;
padding-bottom: 10px;
padding-left: 20px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}

.footer-item ul {
font-size: 12px;
text-transform: none;
font-weight: normal;
}

And My Wordpress PHP Code is

</div>
<!-- end content-wrap -->
</div>
<!-- end main-wrap -->
<div id="footer">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
<div class="footer-item">
<h3>Bookmarks</h3>
<ul>
   <?php wp_list_bookmarks('title_li=&categorize=0&limit=10'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Monthy Archives</h3>
<ul>
<?php wp_get_archives('limit=10'); ?>
</ul>
</div>
<div class="footer-item">
<h3>Daily Archives</h3>
<ul>
<?php wp_get_archives('type=daily&limit=10'); ?>
</ul>
</div>

<?php endif; ?>
<div class="clear"></div>
<div id="subscribe">
<h4><img src="<?php bloginfo('template_directory'); ?>/images/feed.png" alt="Subscribe to RSS" /> Subscribe</h4>
<p>Subscribe to <a href="<?php bloginfo('rss2_url'); ?>">RSS</a> or enter you email to receive newsletter for news, articles, and updates about what's new.</p>
<form   action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo get_option('feedmail'); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
  <input type="text" onblur="if (this.value == '') {this.value = 'enter your email...';}" onfocus="if (this.value == 'enter your email...') {this.value = '';}" value="enter your email..." name="semail" id="semail" />
  <input type="hidden" value="<?php echo get_option('feedmail'); ?>" name="uri"/>
  <input type="hidden" name="loc" value="en_US"/>
  <input type="submit" id="submit" value="Subscribe" />
  </form>
 </div>
 <div id="footer_right">
 <ul>
  <li> <a href="<?php echo get_option('home'); ?>">Home</a></li>
  <?php wp_list_pages('title_li='); ?>
 </ul>
 <small> Copyright &copy; <a href="<?php echo get_option('home'); ?>/" class="on">
 <?php bloginfo('name'); ?>
 </a> <?php echo date("Y",time()+(7*24*60*60)); ?>. All Rights Reserved.</small><br />
 <small><a href="http://www.wordpress.com/">wordpress</a> theme by <a href="http://www.wordpress.com">wordpress</a></small> </div>
 </div>
 <!-- end footer -->

<?php } ?>
<?php wp_footer(); ?>

Answer 1

I think this is what you want:

http://jsfiddle.net/383uF/4/

#column {
border:1px solid #ccc;
-webkit-column-width:15px;
-moz-column-width:15px;
column-width:15px;
width:120px
}
li {
border:1px solid #ccc;
display:inline-block;
}

<div id="column">
 <ul>
 <li>1
 </li>
 <li>2
 </li>
 <li>3
 </li>
 <li>4
 </li>

 <li>5
 </li>
 <li>6
 </li>
 <li>7
 </li>
 <li>8
 </li>

 <li>9
 </li>
 <li>10
 </li>
 <li>11
 </li>
 <li>12
 </li>
 </ul>
</div>

Hope this helps but otherwise please elaborate.:)