Reputation: 49
I am having issues getting my menu to align properly. The images are all spaced far away from each other even when they should be closer. I am new to using Ul and Li and am not sure how to fix this. Ideally I would have the images across the whole screen with no space on the right or left and just a thin space between each image, but instead, there is a large space. I am unsure if this is something in the Ul Li tags or if there is something I can do with margin.
Could someone please advise me. I am including a jsfiddle to show what it currently looks like. https://jsfiddle.net/f1bctqzn/ is what I am currently getting. How do I these lines to touch their respective sides of the screen and still have a small space between the rest.
<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>
Upvotes: 1
Views: 51
Reputation: 42352
Adjusted the margins and used a flexbox
to adjust the images across the whole screen.
Check it out and let me know your feedback. Thanks!
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>
Upvotes: 1
Reputation: 662
See this fiddle
To add space betwwen the li
items, don't add the margin
property to the ul
, but add a margin to the li
items (I used the 2px you had set for the ul
). To add a margin only between the li
items, I used
li.header{
margin-left:2px;
}
li.header:first-child{
margin-left: 0;
}
Upvotes: 1
Reputation: 1790
Add padding: 0
to your ul
and margin: 1px
(or something) to li
Also, add width: 100%
to img
Upvotes: 1