Question

我正在尝试使用bootstrap创建一个导航栏。我正在努力使登录和注销正确对齐。我可以这样做吗???我已经上传了html和css代码

Html代码：

<style>#myP{cursor: url(../randomFolder/cursor.png) 5 8, auto;}</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>

Answer 1

<li>是第5和第6，而不是<a>。此外，你的选择器在CSS中是错误的（没有<navbar-inverse>标签，这就是你的意思）。请更正：

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

<强>段

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

<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>

预览

Answer 2

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

.navbar-nav > li:nth-child( 5 ),
.navbar-nav > li:nth-child( 6 ) {
  text-align: right;
}

Answer 3

我发现你需要做几件事来实现这个目的：

1）使用float：right;在第5和第6李元素， 2）在您的情况下，它在UL内部浮动，但UL不是导航栏的整个宽度。要纠正此问题，请将UL调整为导航栏的全宽。

我已经在Code Pen上实现了用户在上面建议的解决方案，并且在您调整UL的宽度之前，没有一种方法适用于您的情况，请看一下：

.nav{
  width:100%;
}

https://codepen.io/anon/pen/EvZXJM

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

3 个答案: