Question

我正在尝试使用我的CSS中心导航栏。我已经能够通过移除浮动来使它居中：left;来自nav ul li。但是，当我这样做时，导航项目将与我的页面正文重叠。换句话说，导航不再在页面顶部分开。这是我的HTML：

    <nav>
       <ul>
        <li><a href="~/">Home</a></li>
        <li><a href="~/Products">Products</a></li>
        <li><a href="~/About">About Us</a></li>
       </ul>
    </nav>

以下是我的CSS部分：

    ul {
        display: inline-block;
        margin-top:  5px;
    }

    nav {
        list-style:none;
        margin:0;
        padding:0;
        text-align:center;  
    }

    nav ul {
       /*height: 1px*/
        list-style:none;
        margin:0;
        padding:0;
        text-align:center; 
        display: inline;
        text-align: center;
        /*float: right;*/
        font-size: 3em;
        list-style: none;
        /*margin: 5px 0 0 0;*/
    }

    nav ul li {
        /*height:  1px;*/
        display: inline-block;
        font-family: Tahoma, Verdana, Helvetica, Sans-Serif;
        font-size: .5em;
        float:left;
        margin-left: 30px;
     }

Answer 1

试试这个

      nav{
          margin-top:0;
          margin-bottom:0;
          margin-left:auto;
          margin-right:auto;
           width:300px;
           }



          nav{

                margin:0 auto;
               width:300px;
             }

你可以使用任何尺寸的导航宽度仅使用300px进行说明。 width属性是essentail，因为如果没有它，浏览器将无法使您导航中心。

尝试使用CSS将我的导航栏居中

1 个答案: