スペースを使用してアイテムをナビゲートする（css）

Question

私はこの問題に費やした1時間後に、CSSを使っている専門家ではありません。

私のhtmlコード：

<div class="content2"> 
    <div class="Menu"> 
     <a href="/all">All Investments (3)</a> 
     <a href="/payouts">Payouts (0)</a> 
    </div> 
    ...some other code 
</div> 

私のCSSコード：

.content2 {padding: 10px 30px; color: #fff} 
.Menu {background: #022000; width: 1000px; height: 50px; margin: 20px auto; text-align: center} 
.Menu a {float: left; height: 26px; width: 313px; padding: 12px 10px; color: #fff} 
.Menu a:hover {background: #277521} 

私は、ナビゲーションバーの幅を埋める完全な私のMenuクラスに2つのアイテムをしたいと思います。現在、彼らはnavbarの完全な幅を取っていません。

Answer 1

width: 50%;を使用し、埋め込みをpadding: 12px 0px;と変更してください。

説明：

• width: 50%：2つの要素があるように、これは親の幅の50％を取るために各要素を可能にします。

• padding: 12px 0px：左右のパディングを0pxにすると、各要素に必要な余分なスペースがなくなります。

.content2 { 
 
    padding: 10px 30px; 
 
    color: #fff 
 
} 
 
.Menu { 
 
    background: #022000; 
 
    width: 1000px; 
 
    height: 50px; 
 
    margin: 20px auto; 
 
    text-align: center 
 
} 
 
.Menu a { 
 
    float: left; 
 
    height: 26px; 
 
    width: 50%; 
 
    padding: 12px 0px; 
 
    color: #fff; 
 
    background-color: yellow; 
 
} 
 
.Menu a:hover { 
 
    background: #277521 
 
}

<div class="content2"> 
 
    <div class="Menu"> 
 
    <a href="/all">All Investments (3)</a> 
 
    <a href="/payouts">Payouts (0)</a> 
 
    </div> 
 
    ...some other code 
 
</div>

Answer 2

フレックスでそれを試してみてください。これらのスタイルを追加します：フレックスは非常に強力な財産であり、私はあなたがなぜ興味を持っている場合は、それを少し研究提案：

.Menu {display: flex;} 
.Menu a {flex: 1;} 

これだけではなく、2

ヒントは、メニュー項目の任意の数で動作します私のコードが動作します。

Answer 3

次のようにしてください。

width:50%とbox-sizing: border-box;~aを指定します。そしてheight:50px;

.content2 { 
 
    padding: 10px 30px; 
 
    color: #fff 
 
} 
 
.Menu { 
 
    background: #022000; 
 
    width: 1000px; 
 
    height: 50px; 
 
    margin: 20px auto; 
 
    text-align: center 
 
} 
 
.Menu a { 
 
    float: left; 
 
    height: 50px; 
 
    width: 50%; 
 
    padding: 12px 10px; 
 
    color: #fff; 
 
    box-sizing: border-box; 
 
} 
 
.Menu a:hover { 
 
    background: #277521 
 
}

<div class="content2"> 
 
    <div class="Menu"> 
 
    <a href="/all">All Investments (3)</a> 
 
    <a href="/payouts">Payouts (0)</a> 
 
    </div> 
 
    ...some other code 
 
</div>

Working Fiddle

Answer 4

.content2 { 
 
    padding: 10px 30px; 
 
    color: #fff 
 
} 
 
.Menu { 
 
    background: #022000; 
 
    width: 1000px; 
 
    height: 50px; 
 
    margin: 20px auto; 
 
    text-align: center 
 
} 
 
.Menu a { 
 
    float: left; 
 
    height: 26px; 
 
    width: 50%; 
 
    padding: 12px 0px; 
 
    color: #fff; 
 
    background-color: yellow; 
 
} 
 
.Menu a:hover { 
 
    background: #277521 
 
}

<div class="content2"> 
 
    <div class="Menu"> 
 
    <a href="/all">All Investments (3)</a> 
 
    <a href="/payouts">Payouts (0)</a> 
 
    </div> 
 
    ...some other code 
 
</div>