ナビゲーションテキストの位置を移動するには？

Question

ナビゲーションバーを作成しようとしていますが、htmlの背景に完全には一致しませんbody

HTML：：

<div class="head-nav"> 
    <ul class="navigasi"> 
     <li><a href="#">FACEBOOK</a></li> 
     <li><a href="#">PORTAL</a></li> 
     <li><a href="#">FORUM</a></li> 
    </ul> 
</div> 

CSS：ここで私はこれまで持っているものだ

.navigasi { 
    list-style-type: none; 
    text-align: center; 
    margin: 0; 
    padding-bottom: 40px; 
} 

.navigasi li{ 
    display: inline-block; 
} 

.navigasi >li> a { 
    text-align: center; 
    font-weight: bold; 
    font-size: 1.5em; 
    font-style: italic; 
    padding: 15px; 
    margin-top: 29px; 
} 

私はFACEBOOKを移動したい、PORTAL、およびFORUMは、左またはrightinそれぞれのボックスに合わせて並べ替えます。私はこのようにHTMLでスタイルを追加しようとしました：

<li><a style="left: 30px;" href="#">FACEBOOK</a></li> 

しかし、それは動作しません。 私を助けることができますか？ありがとうございました。 （デフォルト）static以外

Answer 1

あなたはそれをpositionを与え、適用するleft、right、topまたはbottomをしたいときはいつでも、：

<li><a style="left: 30px;position:relative;" href="#">FACEBOOK</a></li> 

Answer 2

それを.navigasi上の左のテキスト-alignプロパティを与えます> li> aの代わりにtext-align：を指定します。

`.navigasi >li> a { 
    text-align: left; 
    font-weight: bold; 
    font-size: 1.5em; 
    font-style: italic; 
    padding: 15px; 
    margin-top: 29px; 
}`