2016-10-08 4 views
0

enter image description hereナビゲーションバーにボタンを中央に置く方法は?

バーの中央にある最初の3つのボタンを調整するにはどうすればよいですか?あなたのナビゲーションバーで

#navbar{ 
    list-style-type: none; 
    position: relative; 
    top: -4px; 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
    background-color: #212121; 
} 
+1

あなたの持っているものは何でも構いませんか? – Siddharth

+1

あなたができることは、左のボタンをdivに置き、単純にmargin:0 auto;を追加することです。 –

答えて

0

あなたは1つの別個のdivにこれら3を配置し、あなただけ使用する が必要であることをご メニューオプション(NAV)中心に

0

こんにちは友人を中央に配置することができますテキストアラニングルール:center; 、なぜですか?メニューリストが 「李「」または「」UL「」」によって形成されており、我々はこのリストにルールと:) 準備ができて、メキシコからの挨拶適用 ので;)

0
<html> 

<head> 
    <style> 
     body{ 
      margin: 0px; 
     } 
     .navbar{ 
      height: 60px; 
      background-color: #bbb; 
      line-height: 60px; //this will center inline elements in your navbar 
     } 
     .container{ 
      margin-left: 5%; 
      margin-right: 5%; 
     } 
     .btn{ 
      background-color: white; 
      padding: 10px 20px; 
      width: 100px; 
      border: none; 
      border-radius: 2px; 
      display: inline; 
     } 
     .nav{ 
      display: inline; 
      list-style-type: none; 
     } 
     .nav li{ 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <!--Navbar--> 
    <nav class="navbar"> 
     <div class="container"> 
      <ul class="nav"> 
       <li><button class="btn">Button1</button></li> 
       <li><button class="btn">Button2</button></li> 
       <li><a class="btn">&lt;a&gt; Button</a></li> 
      </ul> 
     </div> 
    </nav> 
</body> 

を上記のコードはあなたのために働くはずです。アンカータグとボタンタグを使用してボタンを表示しました

関連する問題