最近突然想到了这个问题，以前看过类似文章的解答，自己也想了想，笔记一下 ，以免忘记。
XML/HTML代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>测试</title>
- <style>
- *{ padding:0; margin:0; list-style:none;}
- ul { float:left; position:relative; left:50%;}
- li { float:left;position:relative; right:50%; padding:6px; }
- </style>
- </head>
- <body>
- <div>
- <ul>
- <li><a href="#">一丝不挂-陈奕迅</a></li>
- <li><a href="#">再见二丁目-杨千桦</a></li>
- <li><a href="#">春光乍泄-张国荣</a></li>
- </ul>
- </div>
- </body>
- </html>
这个使用 li的起始位置在剧中的50%的地方，所以需要把li 向左边移动50%。 这里想问题的时候要注意，position:relative所定义的移动百分比不是相对于自身的，而是相对于父元素的。也就是说 li 50% 实际上计算出来的宽度 是 ul宽度的一半，而不是li的。
