Html 仅在移动设备中导航栏选项卡的全尺寸和中心位置

我如何将导航栏集中在移动设备上，并使其100%只在移动设备上使用

目前我使用

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <nav class="navbar-collapse collapse">
        <ul id="myTab" class="nav navbar-nav pull-right">
            <li></li>
            ...
        </ul>
    </nav>
</header>

...

因为在桌面模式下，我希望我的导航在右边

当我切换到移动设备时，它如下所示：

我怎样才能把它改成全宽的李，谁居中

多谢各位

---

编辑：我稍后会发布我的解决方案。

您可以通过媒体查询来执行此操作，当其宽度低于一定数量的像素时，更改其宽度

@media (max-width:480px) {
    #myTab li { width:100%; float:none; }
}

---

---

编辑-还添加了浮动：无，因为它现在似乎是浮动的。

当菜单折叠为较小宽度时，使用媒体查询覆盖

.nav>li

类

@media (max-width: 768px) { 
  .nav>li {
    text-align: center;
  }
}

---

演示：

谢谢您的回答

我用以下代码行解决了我的问题：

html文件：我刚刚删除了

中的

向右拉：

<header class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <nav class="navbar-collapse collapse">
        <ul id="myTab" class="nav navbar-nav">
            <li></li>
            ...
        </ul>
    </nav>
</header>

现在看来：

-如您所见，我删除了
文本对齐：居中部分，只是因为左对齐看起来更好。
现在链接居中，但仍然在右侧（请参阅我文章中的图片）。我怎样才能让他们回到左边，并使链接100%<代码>宽度：100%不起作用。我不明白“链接居中，但它们仍然在右侧”？他们是居中的（你说的右边是什么意思？）我现在已经有了一个答案（但因为StackOverflow说我必须等待，所以无法发布）：我的问题是我在
-元素上使用了
向右拉
，但没关系。我删除了它，并用
#myTab{float:right；}
自己实现了它。然后我用
#myTab{float:none；}
在媒体查询中重置它，并用
#myTab li{width:100%；}
将宽度设置为全宽。以后再说。谢谢你的回答！：-）
#myTab 
{ 
    float:right;
}

@media (max-width:768px)
{
    #myTab 
    {
        float:none;
    }   
    #myTab li {
        width: 100%; 
    }
}