Question

求高手 如何设置css 才能让多个 li 自适应100%屏宽水平居中排列 问题见下图：

php代码如下：
<div id="main" class="c" > <?php 。。。。。 ?> <?php。。。。。。。 ?>
<div id="theway">。。。。。 </div>

<ul class="image_box"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li id="post-<?php the_ID(); ?>" > <h1> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?
php the_title(); ?>" class="out" target="_blank"> <strong><?php the_title(); ?></strong> <?php echo get_post_first_pic(get_the_ID()) ?> <span class="fenlei" title="分类"><?php show_cats();?> </span> </a>
</h1> <?php echo '<div class="info"><span title="old" class="yuanjia">'. zdy
($post->ID,'oldprice') .'</span><span title="new" class="jiage">￥'. zdy($post->ID,'price')
.'</span><a href="'. get_permalink() .'" title="'. get_the_title() .'" target="_blank">打开</a>
</div>' ?> <div class="time"><?php the_time('m/d-G:h') ?></div> <div class="tags"><?php the_tags(__(' '), ' ? '); ?></div>

</li>

<?php endwhile; else: ?> <div class="post">对不起，你要查看的宝贝因为已过期而删除。你可以去<a
href="<?php echo get_option('home'); ?>"><strong>首页</strong></a>查看，或查看以下宝贝：
</div> <div class="cl"></div> <ul class="image_box c" > <?php get_recent_posts(16,$id); ?> </ul> <?php endif; ?>

</ul>

请教高手 css样式 该如何写呢？
.image_box{ }
.image_box li { }

Answer 1

.image_box{ list-style:none; width:100%; margin:0px auto; }
.image_box li { width: 24% ; height:200px; background-color:#ccc; float:left; margin-left:2px }

24% 可以随便调啦, 放几个就100/几 再减几个像素就可以

追问

这样能设定固定几个 li 排列 ，但不会适应屏幕自动填充数量居中排列，比如屏幕拉宽时自动填充5个li居中，屏幕拉窄时自动填充4个居中，剩下的一个自动到第二排，要实现这样的样式该如何设置呢？
我在网上看大多是用下边这种方法的，可我在这里却实现不了
.image_box {display:block;text-align:center;}
.image_box li {
display:inline-block;*display:inline;*zoom:1;vertical-align:top;

}
请高手详解！

Answer 2

.image_box ｛margin:0 auto;｝
.image_box ul {width:100%; }
.image_box ul li {width:100%; margin:0 auto; ｝

Answer 3

ul设置固定宽度,然后给属性 margin : auto;

Answer 4

<style>
.mage_box{ list-style:none; width:1000px; margin:0px auto;}
.mage_box li{ width:230px; height:200px; background-color:#ccc; float:left; margin:0px 20px 10px 0px;}
</style>
<ul class="mage_box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

楼主看下是不是这样的效果，把对应的宽度值换成你要的宽度就可以了

追问

ul的宽度不定 比如90% 如何让 li 适应屏幕自动填充数量居中排列呢

追答

其他不变，把宽度的数值换为百分比即可~

追问

这样不是我想要的效果，如何适应屏幕自动填充数量居中排列，比如屏幕拉宽时自动填充5个li居中，屏幕拉窄时自动填充4个居中，剩下的一个自动到第二排，要实现这样的样式该如何设置呢？
网上有样式 ：相对浮动居中 我也试了 里面的元素只有一排时可以居中，但是有多排时就不行了，都浮动到了左边，这是为什么呢，头都大了。

追答

可以用jquery判断，当浏览器窗口resize的时候，根据窗口宽度自动改变ul的宽度值；另一个方法是用css媒体头调用不同样式表，具体方法可以百度找下