如何在页脚的每 10 个列表项之后创建一个新行

Question

我想将列表项分成特定宽度内的第二列，这样如果它有 100 个列表项，那么它将创建 5 列和 20 个原始列表项。

看起来像 http://www.huffingtonpost.com/ （链接）

我的 CSS 是：

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

和我的 WordPress PHP代码是

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

我想这就是你想要的：

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>

希望这个有帮助，但请详细说明。:)