Html 如何在导航栏中具有居中链接和其他右/左定位链接？

我有一个由5个链接组成的导航栏。其中三个需要居中，另外两个需要正确定位。但是，我得到了以下结果，其中三个“居中”链接实际上没有居中。两个位于右侧的链接将三个居中的链接拉向左侧。有人能帮我将三个链接居中吗

这是我的代码（索引）：

---

您面临的问题之一是浏览器正在计算两个

的位置-您没有应用任何CSS强制浏览器执行其他操作

通过在右对齐的

上使用绝对定位，基本上可以从布局中删除其示意图。以下是我的建议：

div.navbar-collapse {
    position:relative;
    }
ul.navbar-nav:nth-of-type(1) {
    display:table;
    margin:0 auto;
    }
ul.navbar-nav:nth-of-type(2) {
    position:absolute;
    top:0px;
    right:0px;
    }

如本片段所示：（也在上）

*{
边际：0px；
填充：0px；
框大小：边框框；
}
navbar先生{
背景色：黑色；
}
.导航栏标题{
文本对齐：居中；
颜色：#fff；
}
.导航栏倒塌{
位置：相对位置；
}
/*移除导航栏上的o形间隙和o形连杆*/
.navbar nav li{
显示：内联块；
}
/*阿林哈门托达纳瓦奥中心酒店*/
.导航栏导航：第n个类型（1）{
显示：表格；
保证金：0自动；
}
/*阿林哈门托酒店*/
纳瓦尔先生{
显示：块；
颜色：白色；
填充：8px；
}
.navbar li~li a{
左边距：16像素；
}
.导航栏a:悬停{
背景颜色：灰色；
颜色：红色；
}
.导航栏a：聚焦{
背景颜色：灰色；
颜色：黑色；
}
.导航栏导航：第n个类型（2）{
位置：绝对位置；
顶部：0px；
右：0px；
边框颜色：黄色！重要；
}

|







您面临的问题之一是浏览器正在计算两个
的位置-您没有应用任何CSS强制浏览器执行其他操作

通过在右对齐的
上使用绝对定位，基本上可以从布局中删除其示意图。以下是我的建议：

div.navbar-collapse {
    position:relative;
    }
ul.navbar-nav:nth-of-type(1) {
    display:table;
    margin:0 auto;
    }
ul.navbar-nav:nth-of-type(2) {
    position:absolute;
    top:0px;
    right:0px;
    }

如本片段所示：（也在上）


*{
边际：0px；
填充：0px；
框大小：边框框；
}
navbar先生{
背景色：黑色；
}
.导航栏标题{
文本对齐：居中；
颜色：#fff；
}
.导航栏倒塌{
位置：相对位置；
}
/*移除导航栏上的o形间隙和o形连杆*/
.navbar nav li{
显示：内联块；
}
/*阿林哈门托达纳瓦奥中心酒店*/
.导航栏导航：第n个类型（1）{
显示：表格；
保证金：0自动；
}
/*阿林哈门托酒店*/
纳瓦尔先生{
显示：块；
颜色：白色；
填充：8px；
}
.navbar li~li a{
左边距：16像素；
}
.导航栏a:悬停{
背景颜色：灰色；
颜色：红色；
}
.导航栏a：聚焦{
背景颜色：灰色；
颜色：黑色；
}
.导航栏导航：第n个类型（2）{
位置：绝对位置；
顶部：0px；
右：0px；
边框颜色：黄色！重要；
}

|







如果我的代码是以下代码（删除以下两行），如何解决我的问题

<nav class="navbar" style="border:10px solid blue;" >

<!-- header -->
<div class="navbar-header">
|
</div><!-- /header -->

<!-- navbar -->
<div id="barra-navegacao" class="collapse navbar-collapse" style="border:1px dashed red;" >
  <ul class="nav navbar-nav navbar-center" style="border:1px solid red;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>

  </ul> /*THIS LINE REMOVED*/
  <ul class="nav navbar-nav" style="border:1px solid red;"> /*THIS LINE REMOVED TOO*/

    <li><a href="inscrevase.php">Inscrever-se</a></li>
    <li  class="<?= $erro == 1 ? 'open':'' ?>">
    <a id="entrar" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Entrar</a>
    </li>
  </ul>
</div><!-- /navbar --> 
</nav><!--/nav  -->


|




/*此行已删除*/
/*此行也已删除*/

如果我的代码是以下代码（删除以下两行），如何解决我的问题

<nav class="navbar" style="border:10px solid blue;" >

<!-- header -->
<div class="navbar-header">
|
</div><!-- /header -->

<!-- navbar -->
<div id="barra-navegacao" class="collapse navbar-collapse" style="border:1px dashed red;" >
  <ul class="nav navbar-nav navbar-center" style="border:1px solid red;">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>

  </ul> /*THIS LINE REMOVED*/
  <ul class="nav navbar-nav" style="border:1px solid red;"> /*THIS LINE REMOVED TOO*/

    <li><a href="inscrevase.php">Inscrever-se</a></li>
    <li  class="<?= $erro == 1 ? 'open':'' ?>">
    <a id="entrar" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Entrar</a>
    </li>
  </ul>
</div><!-- /navbar --> 
</nav><!--/nav  -->


|




/*此行已删除*/
/*此行也已删除*/

谢谢@aequalsb！正如你提到的，我只需要设置绝对位置来求解！谢谢@aequalsb！正如你提到的，我只需要设置绝对位置来求解！