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

发布时间：2020-12-14 18:28:37 所属栏目：资源来源：网络整理

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

我有我的网站导航列表项目,我需要居中.我浮动,以便我可以在列表项上填充…将它们设置为内联似乎消除了顶部和底部填充.

<style type="text/css">

   #nav {
       width:100%;
   }

   #nav ul {
       margin-right: auto;
       margin-left: auto;
   }

   #nav ul li {
      float: left;
      background-color: #333;
      color: #fff;
      padding: 15px;
      margin: 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;
        margin: 0 5px;
        display:inline;
        border:gray solid 1px;
    }

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!