UL/LI CSSメニューが正しく整列していません

Question

メニューを正しく整列させることに問題があります。より近づくべきときでさえ、画像はすべて互いに離れている。私は李と李を使用するのが初めてで、これを修正する方法がわからない。理想的には、右または左にスペースがなく、各画像の間に狭いスペースを置いて画面全体に画像を配置するのではなく、代わりに大きなスペースがあります。私はこれがUl Liのタグの中にあるかどうか、あるいは私が余裕を持ってできることがあるかどうかは分かりません。

私に助言してもらえますか？私は現在どのように見えるかを示すjsfiddleを含んでいます。 https://jsfiddle.net/f1bctqzn/は現在私が得ているものです。どのようにこれらの線を画面のそれぞれの側面に触れ、残りの部分の間に小さなスペースを残しますか。

<li class="header"><a href="/menu/kale-grain-bowls"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kale-grain-bowls"></a></li> 
<li class="header"><a href="/menu/kids-real-meals"><img src="https://i.imgur.com/T4ZAaK3.png" class ="kids-real-meals"></a></li> 

Answer 1

marginを追加しない、width: 100%からimg

Answer 2

がthis fiddle

がliアイテムbetwwenスペースを追加するにはを参照してください追加、またli にごulとmargin: 1px（か何か）にpadding: 0を追加プロパティをulに追加しますが、liアイテムにはマージンを追加します（私はulの2pxを使用しました）。唯一li項目間のマージンを追加するには、私は

li.header{ 
    margin-left:2px; 
} 
li.header:first-child{ 
    margin-left: 0; 
} 

Answer 3

を使用

余白を調整し、全体画面上で画像を調整するためにflexboxを使用。

あなたのフィードバックをお聞かせください。ありがとう！すべてのあなたの画像の

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul.toplist { 
 
    list-style: none; 
 
    padding: 0; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
li.header { 
 
    display: inline-block; 
 
    height: 100%; 
 
    margin-right: 1px; 
 
} 
 
img.kale-grain-bowls, 
 
img.salads, 
 
img.burgers-sandwiches, 
 
img.sides, 
 
img.smoothies-milkshakes, 
 
img.kids-real-meals { 
 
    max-width: 100%; 
 
    max-height: 100px; 
 
}

<ul class="toplist"> 
 
    <li class="header"> 
 
    <a href="/menu/kale-grain-bowls"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="kale-grain-bowls"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/salads"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="salads"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/burgers-sandwiches"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="burgers-sandwiches"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/sides"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="sides"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/smoothies-shakes"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="smoothies-milkshakes"> 
 
    </a> 
 
    </li> 
 
    <li class="header"> 
 
    <a href="/menu/kids-real-meals"> 
 
     <img src="https://i.imgur.com/T4ZAaK3.png" class="kids-real-meals"> 
 
    </a> 
 
    </li> 
 
</ul>