Html 如何使用css使第5和第6个li左对齐_Html_Css_Twitter Bootstrap_Bootstrap 4

Html 如何使用css使第5和第6个li左对齐

html css twitter-bootstrap bootstrap-4

Html 如何使用css使第5和第6个li左对齐,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我正在尝试引导制作导航栏。我正在努力使登录和注销正确对齐。我该怎么做？？？我已经上传了html和css代码 Html代码： <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteNa

我正在尝试引导制作导航栏。我正在努力使登录和注销正确对齐。我该怎么做？？？我已经上传了html和css代码

Html代码：

<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Log-out</a></li>
      <li><a href="#">Log-in</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Inverted Navbar</h3>
  <p>An inverted navbar is black instead of gray.</p>
</div>

</body>

 <style>
  .navbar navbar-inverse .nav navbar-nav ul li a:nth-child(5):nth-child(6)
  {
      background-color:green;
      float :right;
  }
</style>










反向导航条
反转的导航条是黑色而不是灰色

CSS代码：

<body>

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Log-out</a></li>
      <li><a href="#">Log-in</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Inverted Navbar</h3>
  <p>An inverted navbar is black instead of gray.</p>
</div>

</body>

 <style>
  .navbar navbar-inverse .nav navbar-nav ul li a:nth-child(5):nth-child(6)
  {
      background-color:green;
      float :right;
  }
</style>


.导航条导航条反向导航条导航条导航ul li a:n子项（5）：n子项（6）
{
背景颜色：绿色；
浮动：对；
}
是第五和第六位，而不是








您需要选择第n个li
，而不是第n个a
，因为始终只有一个a


.navbar nav>li:n第n个子项（5），
.navbar nav>li:第n个子项（6）{
文本对齐：右对齐；
}







我发现您需要做几件事才能让它正常工作：
1） 使用float:right；五、六里，
2） 在您的情况下，它正好在UL内浮动，但UL不是导航条的全宽。要纠正此问题，请将UL调整为导航条的全宽
我已经在Code Pen上实现了用户建议的上述解决方案，在您调整UL的宽度之前，这些解决方案在您的情况下都不起作用，请看：
.nav{
  width:100%;
}