どうすれば5thと6thを左揃えにするのですか？

-2

navbarを作るためにブートストラップをしようとしています。私はログインとログアウトを正しく行うために苦労しています。 HTMLとCSSのコードどうすれば5thと6thを左揃えにするのですか？

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

それはですは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ではなく、常に1つだけaがあるためです。

1）フロートを使用します：

.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

は、私はあなたがこの作業を取得するためにいくつかのことを行う必要があることがわかった権利。 5番目と6番目のLi要素の 2）あなたのケースでは、UL内で浮動していますが、ULはナビゲーションバーの全幅ではありません。これを修正するには、ULをナビゲーションバーの全幅に調整します。

私はあなたがULの幅を調整するまで、見てみましょうソリューションのユーザーがあなたの状況にコードペンなしの仕事に上記示唆した実装しました：

.nav{ 
    width:100%; 
}

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

出典

2017-08-06 15:25:25

どうすれば5thと6thを左揃えにするのですか？

答えて

関連する問題