UL/LI CSS菜單未正確對齊

我遇到的問題讓我的菜單正確對齊。即使它們應該靠得更近，圖像也相距很遠。我是新來的使用烏爾和李，我不知道如何解決這個問題。理想情況下，我會在整個屏幕上顯示圖像，在右側或左側沒有空間，每個圖像之間只有一個很小的空間，但是卻有很大的空間。我不確定這是否是Ul Li標籤中的內容，或者是否有我可以使用保證金做的事情。UL/LI CSS菜單未正確對齊

有人請告訴我。我包括一個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>

來源

2016-08-16 P. Burden

首先都是灰色的方塊，不知道如何調試。其次，你已經添加了保證金，這將在所有四面添加一些空間。 – Smit

是的，他們應該是灰色的盒子，現在，我只是試圖讓他們適當的位置在這一點上。有沒有辦法讓保證金不同？我也嘗試改變保證金的價值，並沒有看到結果的變化。 –

添加padding: 0您ul和margin: 1px（或別的東西）來li 此外，添加width: 100%到img

來源

2016-08-16 02:49:30

而不是最大寬度？或者另外？ –

並不重要，如果你有寬度：100％:) –

好吧，現在它顯示爲一條實線 –

見this fiddle

要速滑運動員的肌肉的li項目增加空間，不添加margin財產到ul，但爲li項目（我使用您爲ul設置的2px）添加了保證金。要添加只有li項目之間的緣，我用

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

來源

2016-08-16 02:57:04

調整頁邊距和使用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>

你的圖像

來源

2016-08-16 02:58:50 kukkuz

UL/LI CSS菜單未正確對齊

回答

相關問題