我如何取消订购移动页面导航栏？

Question

所以我有一个移动网站，其中订购了导航栏，并且悬停在背景颜色上与设计不成比例，并且在单击时看起来很糟糕，我想将其置于中心而不必弄乱代码。< / p>

以下是现在的样子：

我试图修改代码并取走浮动：左转为无，然后导航似乎在争抢。

以下是移动CSS代码：

       .mainBanner nav{
position: absolute;
/*text-align: center;*/
   top: 15%;
   left: 15%;
font-size: 1.190em;
font-weight: bold;
height: 40px;
line-height: 30px;
margin: 0 auto 30px 50px; 
font-family: 'lato-Reg', sans-serif;

    }

    .mainBanner nav ul {
   list-style: none; 
   margin: 0 auto;
     }

    .mainBanner nav ul li {
float: left; 
display: inline; 
    }
  .mainBanner nav a:link, .mainBanner nav a:visited {
color: #ecf0f1; /* Color of the font in the nav*/ 
display: inline-block;
height: 30px;
padding: 5px 30px;
text-decoration: none;
     }
  .mainBanner nav a:hover, .mainBanner nav a:active,
  .mainBanner nav .active a:link, .mainBanner nav .active a:visited {
background: #16a085;
color: #fff;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow: none !important;
    }

Answer 1

使用此更新代码，请参阅

//comment this line
.mainBanner nav ul li {
    /*float: left; */
    display: inline; 
}

//uncomment this line
.mainBanner nav{
   text-align: center;
}

Fiddle