HTML＆CSSセンターのナビゲーションバー

私の小さなテストウェブサイトでは、のナビゲーションバーを中央に配置できないという問題があります。 ナビゲーションバーがウェブサイトの右側から左側に移動している間に、すべてのボタンが中央に表示されます私は固定幅なしを持っていて1つ持っていることを望んでいない。ソリューションはもスマートフォンとタブレットで動作し、言及するだけです。私はIEのサポートについては本当に気にしません。私はすでにウェブを通して少しだけ検索しましたが、私は何の努力もしませんでした。HTML＆CSSセンターのナビゲーションバー

 <header class="navigation"> 
     <nav> 
      <ul> 
       <li><a class="active" href="#home">Home</a></li> 
       <li><a href="#download">Download</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
      </ul> 
     </nav> 

     <h1>Test Test Test</h1> 
    </header>

そしてここでは、CSSのコードです：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border-radius: 5px; 
    background-color: #333333; 
} 

li { float: left; } 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
    border-bottom: none; 
} 

    li a:hover { background-color: #111111 }

私はCSS3でHTML5を使用しています。ここ

は、私がすでに持っているコードです。

編集：私はボタンで十分ではなかったようです。ボタンは、ナビゲーションバー自体と同じ大きさであってはなりません。すべてのボタンはナビゲーションバーの中央に配置する必要があります。中央にはボタンがあり、左右に十分なスペースがあればボタンのない黒色のナビゲーションバーがあります。

出典

2016-08-20 ShadowDragon

フレキシボックスを使用すると、まさにそれを行います...

flex-flow: row wrap;ナビゲーションがビューポートよりも大きい場合は、メニューは小さな画面上でラップすることができます追加します。

FYIのすべてのブラウザで実行するには、これらのスタイルにプレフィックスを付ける必要があります。

.navigation nav { 
 
    display: flex; 
 
    justify-content: center; 
 
    
 
    background-color: #333333; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    border-bottom: none; 
 
} 
 
li a:hover { 
 
    background-color: #111111 
 
}

<header class="navigation"> 
 
    <nav> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#download">Download</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
    </ul> 
 
    </nav> 
 

 
    <h1>Test Test Test</h1> 
 
</header>

出典

2016-08-20 22:32:36 Aaron

大丈夫、どうも。私はボタンで十分ではなかったようだ。ボタンは、ナビゲーションバー自体と同じ大きさであってはなりません。すべてのボタンはナビゲーションバーの中央に配置する必要があります。中央にはボタンがあり、左右に十分なスペースがあればボタンのない黒色のナビゲーションバーがあります。 – ShadowDragon

@ShadowDragonああ、私はあなたのために私の答えを更新しました。 – Aaron

@ ShadowDragon私は接頭辞を必要とするあなたのスタイルを分離しました。あなたはそれらを作成するためにオンラインの自動接頭辞を使うことができます。 – Aaron

私はこのケースでは、我々は3つのli要素を持っているので、ちょうど、メニュー内のli項目の数によって100％を分割する場合になると思う最も単純ソリューション幅の約33％そう。だから、

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background-color: #333333; 
 
} 
 
li { 
 
    float: left; 
 
    width: 33%; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    border-bottom: none; 
 
} 
 
li a:hover { background-color: #111111 }

<html> 
 
<head> 
 
</head> 
 
<body> 
 
     <header class="navigation">  
 
     <nav> 
 
      <ul> 
 
       <li><a class="active" href="#home">Home</a></li> 
 
       <li><a href="#download">Download</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
      </ul> 
 
     </nav> 
 

 
     <h1>Test Test Test</h1> 
 
     </header> 
 
</body> 
 
</html>

出典

2016-08-20 22:37:54 turkus

lutionだけCSSの2行： 1. UL {テキスト整列：センター;} 2のLi {表示：インラインブロック;} 全て:)

<html> 
 
<head> 
 
\t <style> 
 
\t \t ul { 
 
\t \t  list-style-type: none; 
 
\t \t  margin: 0; 
 
\t \t  padding: 0; 
 
\t \t  overflow: hidden; 
 
\t \t  border-radius: 5px; 
 
\t \t  background-color: #333333; 
 
\t \t  text-align: center; 
 
\t \t } 
 

 
\t \t li { display: inline-block; } 
 

 
\t \t li a { 
 
\t \t  display: block; 
 
\t \t  color: white; 
 
\t \t  text-align: center; 
 
\t \t  padding: 16px; 
 
\t \t  text-decoration: none; 
 
\t \t  border-bottom: none; 
 
\t \t } 
 

 
\t \t  li a:hover { background-color: #111111 } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <header class="navigation"> 
 
     <nav> 
 
      <ul> 
 
       <li><a class="active" href="#home">Home</a></li> 
 
       <li><a href="#download">Download</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
      </ul> 
 
     </nav> 
 

 
     <h1>Test Test Test</h1> 
 
    </header> 
 
</body> 
 
</html>

出典

2016-08-21 00:03:20 besartm

HTML＆CSSセンターのナビゲーションバー

答えて

関連する問題