2016-03-22 19 views
0

私は(ブートストラップを使用して)プロジェクトに取り組んでいますが、私のnavがまだ水平に配置されているのではなくスタックされている理由を理解できないようです。私は思うことができるすべてを試してみましたが、コードを覚えているところでオンラインでヘルプを探すことさえできましたが、どちらも理解できませんでした。彼らは、私はそれが動作する必要があり、実際には自分のコードエディタで動作すると言いました、それはちょうど私がWebホスティングを持っていないと私は学んでいるので、ファイルが配置されている私のコンピュータで動作しません。私はまた、私のブラウザでは、nav pull-rightが動作し、リンクが右側にあることに気付きました(しかし、それらはまだ水平ではありません)。しかし、ここで "run code snippet" imgのプレースホルダの下に、それが何かを意味するかどうかはわかりませんが、私はその情報を含めると思っていました。私のnavはインラインブロックとして表示されません

header nav ul{ 
 
\t display: inline-block; 
 
}
<header> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t <img id="logo" src="http://placehold.it/150x150"> 
 
\t <nav> 
 
\t <ul class="nav pull-right"> 
 
\t \t <li><a href="#" class="btn-default">About</a></li> 
 
\t \t <li><a href="#" class="btn-default">Projects</a></li> 
 
\t \t <li><a href="#" class="btn-default">Contact</a></li> 
 
\t </ul> 
 
\t </nav> 
 
\t </div> 
 
</div> \t 
 
</header>

enter image description here

答えて

0

あなたはナビゲーションが水平に整列するようにしたいわけですか?

次に、あなたがこの

header nav ul li { 
    display: inline-block; 
} 

実施例hereを使用して試すことができます。

あなたのメソッドがうまくいかない理由は、li要素の代わりにulに適用されるためです。

+0

はい、水平に整列させたいのですが、それでも問題はありません。 – gtomoe

+0

サンプルを追加しました。私の側で動作しています – Vincent1989

+0

または、あなたのCSSが他のCSSによって上書きされている可能性があります。 '!important'を追加して問題が解決するかどうか確認してください。 header nav ul li { display:インラインブロック!重要; } – Vincent1989

関連する問題