2017-03-24 5 views
0

フレンド。私はHTMLとCSSの非常に初心者です。ナビゲーションバーのアラインメント - 非常に初心者

ナビゲーションバーにどのようにテキスト(CUSTOMER、FAQ、CONTACT)を配置するのかちょっと混乱します。

私は垂直方向に中央揃えを試みましたが、それでも上部に固執し続けます。ご助力ありがとうございます。

nav { 
 
    background-color: RGB(80, 80, 95); 
 
    height: 50px; 
 
    position: fixed; 
 
    top: 100px; 
 
    width: 100%; 
 
} 
 

 
nav a { 
 
    float: inline; 
 
    width: 200px; 
 
    padding-top: 10px; 
 
    height: 40px; 
 
    text-align: center; 
 
    font-size: 1.1em; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
.pull-right{ 
 
    text-aling: center; 
 
} 
 

 
body{ 
 
    background-color:black; 
 
    font-family:Lobster; 
 
    color:white; 
 
} 
 

 
h1{ 
 
    padding:0; 
 
    margin-top:0px; 
 
    font-size:5.0em; 
 
    padding-top:0%; 
 
} 
 

 
.btn-default{ 
 
    background-color:black; 
 
    border-color:black; 
 
    color:#337ab7; 
 
    font-size:1.7em; 
 
    margin-top:1%; 
 
} 
 

 
.pageOne{ 
 
    background:url("http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_title_bg.jpg"); 
 
background-size:cover; 
 
    padding-bottom:10%; 
 
    padding-top:10%; 
 
    margin-top:80px; 
 
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<header> 
 
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
</header> 
 

 
<div class="pageOne text-center" id="p1"> 
 
    <ul class="nav nav-pills navbar-fixed-top"> 
 
    <li class="logo-left-top"> 
 
     <a href="#p1"><img src="http://www.chairmanenglish.com/wp-content/uploads/2017/01/img_bi_top.png" width="100px" heigth="50px"></a> 
 
    </li> 
 
     
 
    <li class="pull-right"> 
 
     <a href="#p4">CONTACT</a> 
 
    </li> 
 
    <li class="pull-right"> 
 
     <a href="#p2">FAQ</a> 
 
    </li> 
 

 
    <li class="pull-right"> 
 
     <a href="#p3">CUSTOMER</a> 
 
    </li> 
 
      
 
    </ul>

+0

。それらはどちらも '.nav'でなければなりません。 – Xufox

+0

'pull-right'にも誤植があります –

答えて

0

私はそれがで動作するように取得することができた。他の人が言及したあなたのエラーの一部を訂正とともに

.pull-right{ 
    width: 25%; 
} 

ここで見てみてください:あなたは `あなたのCSSでnav`を使用しているが、あなたは` nav`クラスではない要素を持っているhttp://codepen.io/Squeakasaur/pen/vxrgYd