我想在特定宽度内将列表项分割为第二列，这样如果有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 © <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(); ?>
我想这就是你想要的:
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>
希望这有帮助，否则请详细说明:)