我如何使第五和第六李左對齊使用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

回答

相關問題