使用 css 控制 ul 水平居中

在制作主题时,需要在底部添加一个导航,用来显示“关于我们”等页面链接,一般需要设置 UL 水平居中,下面是比较简洁的方法,可以实现不限定宽度让ul水平居中,关键在于 display:inline 的运用,记录一下。

html结构

1
2
3
4
5
6
7
8
9
<div id="links">
	<ul>
		<li><a href="#">关于倡萌</a></li>
		<li><a href="#">广告合作</a></li>
		<li><a href="#">版权声明</a></li>
		<li><a href="#">联系倡萌</a></li>
		<li><a href="#">友情链接</a></li>
	</ul>
</div>

CSS样例

1
2
3
4
5
#links {height:40px;}
 
#links ul{text-align:center;list-style-type:none;}
 
#links ul li{display:inline-block;}

如果你有更简单的实现方法,欢迎告知倡萌。

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2016/10/25作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

21 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 不亦乐乎 不亦乐乎说道:
    16#

    display:inline;ie6肯定杯具。

    • 胡倡萌 胡倡萌说道:

      事实上,这个在IE6下木有问题哦

  2. Leots Leots说道:
    15#

    OK 学习了。。

  3. Godaddy优惠码 Godaddy优惠码说道:
    14#

    想知道怎么把li前面的那个点去掉 :?:

    • 胡倡萌 胡倡萌说道:

      在css中添加 list-style:none

      • Godaddy优惠码 Godaddy优惠码说道:

        谢谢了 :lol:

  4. 免费资源部落 免费资源部落说道:
    13#

    用表格。万能。 :!:

    • 胡倡萌 胡倡萌说道:

      折腾主题,一般能规避table就规避,毕竟有些朋友不太喜欢

  5. waiting-无限博客 waiting-无限博客说道:
    12#

    很实用,记下来了。适合不懂代码还想折腾的童鞋。 :cool:

  6. 应用世界 应用世界说道:
    11#

    不能小看这些小代码、、

  7. 马潇湘 马潇湘说道:
    10#

    这种的小知识 有时候是很必要的 最精简的代码做成最好的效果

  8. Mr.Ra1n Mr.Ra1n说道:
    9#

    指定宽度的话,直接margin:0 auto就好了。
    不指定宽度就是这个办法最简单了。

  9. 旅途者 旅途者说道:
    8#

    嗯 算是常识了这个^

  10. Tokin Tokin说道:
    7#

    纠结,底部各种样式,我都是直接居中

  11. 茶话汇 茶话汇说道:
    6#

    这些都是CSS基础知识

  12. 我要发芽 我要发芽说道:
    5#

    是display:inline在起作用吧?

  13. wmtimes wmtimes说道:
    4#

    links要加个text-align:center;吧。

  14. Musk Musk说道:
    3#

    这种静态代码还是能看懂

  15. 老妖互联网博客 老妖互联网博客说道:
    2#

    呵呵,这个你也专门写一篇文章啊

  16. complicated complicated说道:
    1#

    请问像您显示举例的这些代码,用什么插件啊?

扫一扫,用手机访问本站

扫一扫,用手机访问本站