html – 如何将浮动列表项目居中？

概述我有我的网站导航列表项目,我需要居中.我浮动,以便我可以在列表项上填充…将它们设置为内联似乎消除了顶部和底部填充. <style type="text/css"> #nav { width:100%; } #nav ul { margin-right: auto; margin-left: auto; } #nav ul 我有我的网站导航列表项目,我需要居中.我浮动,以便我可以在列表项上填充…将它们设置为内联似乎消除了顶部和底部填充.

<style type="text/CSS">   #nav {       wIDth:100%;   }   #nav ul {       @R_301_5553@-right: auto;       @R_301_5553@-left: auto;   }   #nav ul li {      float: left;      background-color: #333;      color: #fff;      padding: 15px;      @R_301_5553@: 10px;   }</style><div ID='nav'>   <ul>      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>      <li>Item 4</li>  </ul></div>

解决方法 通过使项目内联显示,您可以将它们作为文本对齐.设置线高度固定包装问题.

#nav{        text-align: center;        line-height:30px;    }    #nav li {        List-style:none;        @R_301_5553@: 0 5px;        display:inline;        border:gray solID 1px;    }

工作演示可以在这里看到：http://jsfiddle.net/AqRJA/1/

总结

以上是内存溢出为你收集整理的html – 如何将浮动列表项目居中？全部内容，希望文章能够帮你解决html – 如何将浮动列表项目居中？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。