display：インラインでは動作しませんが表示：flex does

Question

私は水平方向のナビゲーションバーを片方しか得ることができませんが、それ以外の人は混乱してしまいます。私がfloat:leftを使用しても奇妙なことが起こるので、私の要素が最良のフォーマットでラベル付けされているかどうかはわかりません。関連するHTMLとCSSは以下の通りです：

<nav class="main-nav"> 
    <ul class="navtext"> 
     <li><a href="index.html">Index</a></li> 
     <li><a href="p2.html">P2</a></li> 
     <li><a href="p3.html">P3</a></li> 
    </ul> 
</nav> 

.main-nav { 
    padding-top: 0px; 
    padding-bottom: 0px; 
    padding-left: 60px; 
    padding-right: 60px; 
    background-image: url("images/navimage.jpg"); 
    text-align: center; 
    border: solid 10px black; 
    font-size: 20px; 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
} 


.navtext { 
    list-style: none; 
    padding: 3rem; 
    margin: none; 
    display: flex; 
} 

私はメイン-NAVとして全体のNAVをやってみましたが、その後、リストのスタイルました：どれも何の効果

EDITを持っていない：私はよインデックスp2とp3との間にギャップを生じさせるためにパディングを得ることが困難である。私は.navtextにパディングを入れているだけで、3つのリンクの周りをパディングするのではなく、1つのものとして扱います。

Answer 1

display:inlineは、「それはem、span、またはa要素のように、テキストの一部であるかのようねえ、まさにこの要素を扱う。」、と言いますインライン要素の幅は指定できません。それはあなたのulのために働いていない理由で、その内部のテキストと同じだけのスペースを占めます。 99％の時間で、実際のテキストにのみdisplay:inlineを使用します。 ulでulがコンテナであり、実際にはテキストそのものではないため、おそらくそれをulに置いてはいけません。

display:blockwidthを指定しないかぎり、要素を展開してコンテナの幅を埋めるようにします。したがって、display:blockをulに入力すると、nav要素の幅を埋めるように展開されます。

display:flexは、かなり新しい機能で、display:blockと同じ動作をしますが、現在使用していない他のクールなものもたくさんあります。

display:inline-blockはdisplay:inlineと同じですが、その要素の周りにテキストが流れていて、要素の幅を指定できる点はdisplay:blockです。

ほとんどのWebブラウザはdisplay:flexをサポートする前に、これは、5年前だった場合、あなたはおそらくliにulとdisplay:inline-blockにdisplay:blockをしたいと思います。しかし、今日、display:flexは、ナビゲーションバーのための素晴らしいオプションです。