我如何使第五和第六李左对齐使用css

-2

我想引导做一个导航栏。我努力使登录和注销权对齐.how我可以做到吗？我已经上传了HTML和CSS代码我如何使第五和第六李左对齐使用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>

CSS代码：

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

来源

2017-08-06 Patrick Aditya

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

预览

来源

2017-08-06 15:08:48

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

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

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

来源

2017-08-06 15:09:25 lumio

我发现，你需要做的几件事情要得到这个工作：

1）使用float：权利;在第5和第6个锂元素上， 2）在你的情况下，它在UL中是浮动的，但UL不是导航条的全部宽度。为了纠正这种情况，请将UL调整为导航栏的全宽。

我已经实现了用户以上建议上的代码笔的解决方案，并没有工作在您的情况，直到你调整UL的宽度，一起来看看：

.nav{ 
    width:100%; 
}

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

来源

2017-08-06 15:25:25

我如何使第五和第六李左对齐使用css

回答

相关问题