这几天碰到个蛮令人懊恼的问题，就是菜单居中的问题，以前没有做过，倒是没有怎么去想过，到真正做时，按照自己原来的思路做时，才发觉原来是错的，废话不多说，先说说这菜单，就是极其普通的那种，看一下例子：
Html 结构：
- <!-- Demo Start -->
- <div id="menu">
- <ul>
- <li class="page-now"><a href="#" title="Home">Home</a></li>
- <li><a href="#" title="iVane Hwang">iVane Hwang</a></li>
- <li><a href="#" title="Katherine Sun">Katherine Sun</a></li>
- <li><a href="#" title="Westlife">Westlife</a></li>
- <li><a href="#" title="Backstreet boyz">Backstreet boyz</a></li>
- <li><a href="#" title="Linkin Park">Linkin Park</a></li>
- <li><a href="#" title="S Club 8">S Club 8</a></li>
- <li><a href="#" title="Take That">Take That</a></li>
- </ul>
- </div>
- <!-- Demo End -->
CSS 部分：
- /* Demo Style Start */
- #menu { text-align: center; padding-top: 10px; border: #6c6c6c solid; border-width: 1px 0; background: #292928; height: 25px;}
- #menu ul { margin: 0 auto;}
- #menu ul li { float: left; margin-right: 3px;}
- #menu ul li a { padding: 3px 10px; text-decoration: none; color: #fff; font-weight: bold;}
- #menu ul li a:hover { background: #91b418;}
- #menu ul li.page-now a { background: #189bb7; padding: 3px 10px; text-decoration: none; color: #fff; font-weight: bold;}
- /* Demo Style End */
Demo 地址：http://blog.ikshow.cn/demo/menu_center/
问题来了，用了margin: 0 auto; text-align: center;还是不能实现居中的效果，仔细看了一下，觉得应该是跟li里的样式float: left;有关，只要去掉float: left;就能居中了，但是去掉了float: left;，li又不能够变成同一行，怎么办呢？
这是鬼哥抛来了个东西，display: inline;,是的，就是这个，把float: left; 去掉，加上display: inline;也能实现li同行，而且还能实现菜单居中的效果，OK,问题至此解决。
最后版本的Demo 地址：http://blog.ikshow.cn/demo/menu_center/index_done.html
最后也得总结一下，其实这个问题很小，很简单，而且自己对于各个属性也算是熟悉，但还是无法灵活应用，特别是平时那些很少用的属性，到真正用的时候还是忘记了它们的存在，看来还是得多多做些页面，多点经验才行！
1楼的 苗 说：
想问 这个是什么文本编辑器 就想想找个这种像作业本一样的效果
嘿嘿 ！！我没有写e-mail，他提示说没有写e-mail我怎么联系你呢，那我写了e-mail，你一定要联系我啊！！
[08月 10th, 2007 at 3:16 pm]
2楼的 iVane Hwang 说：
………………
喵喵姐，这只是Wordpress自带的编辑器而已~
[08月 10th, 2007 at 9:55 pm]
3楼的 Claude Lee 说：
嗯 这样的确可以居中 但是级联菜单的显示会不正常
[08月 24th, 2007 at 4:24 am]
4楼的 tommyfan 说：
被逼重发一次…
display:-moz-inline-box;
display:inline-block;
-moz-box-align:center;
-moz-box-pack:center;
[09月 8th, 2007 at 4:08 pm]
5楼的 iVane Hwang 说：
谁逼你的？告诉我，我丫帮你T死他~
[09月 11th, 2007 at 2:37 pm]