列表中当li漂浮之后的居中问题

在平时的开发中,列表的出镜率一直居高不下,特别是在DIV+CSS的布局中,列表有了更多用处。不过在用的过程中发现,li在设置float的情况下,要让它居中,却也要费些周折。看看代码吧:

<ul>
    <li>
        <a href="http://www.useasp.net">MitchellChu's Blog</a>
    </li>
    <li>
        <a href="http://www.useasp.net">MitchellChu's Blog</a>
    </li>
    <li>
        <a href="http://www.useasp.net">MitchellChu's Blog</a>
    </li>
    <li>
        <a href="http://www.useasp.net">MitchellChu's Blog</a>
    </li>
    <li>
        <a href="http://www.useasp.net">MitchellChu's Blog</a>
    </li>
    <li>
        <a href="http://www.useasp.net">MitchellChu's Blog</a>
    </li>
</ul>
<div>
    Some other things。
</div>

这个代码,需要浮动,并且要求剧中显示出下面这种效果

显示出来的效果图

为了达到这种效果,我们只好使用相对定位,并在外层包含一个div来封装,并且设置相对位置,直接上代码吧,看起来还是相当的纠结的:

<html>
<head>
<title>Mitchell Chu's Blog test demo</title>
<style type="text/css">
div, ul, li {margin: 0;padding: 0;}

body {font: 12px/1.6em 宋体 sans-serif;text-align: center;}
.wrap {position:relative;width: 960px;margin: 0 auto;}
.wrap ul {position: relative;left: 50%;float: left;}
.wrap li {position: relative;right: 50%;display: inline;float: left;}
</style>

</head>
<body>
  <div class="wrap">
    <ul>
	  <li>MitchellChu's Blog</li>
	  <li>MitchellChu's Blog</li>
	  <li>MitchellChu's Blog</li>
	  <li>MitchellChu's Blog</li>
	  <li>MitchellChu's Blog</li>
	  <li>MitchellChu's Blog</li>
    </ul>
  </div>
<br style="clear:both">
<div>
Some other things
</div>

</body>
</html>

	
		
Monday, November 05, 2012 | HTML&HTML5 CSS&CSS3

文章评论

No comments posted yet.

发表评论

Please add 6 and 7 and type the answer here:

关于博主

  一枚成分复杂的网络IT分子,常年游弋于电子商务,属于互联网行业分类中的杂牌军。当前正在待业中...