P. Burden
P. Burden

Reputation: 49

UL/LI CSS menu not aligning properly

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

Answers (3)

kukkuz
kukkuz

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

Mark Perera
Mark Perera

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

Wim Mertens
Wim Mertens

Reputation: 1790

Add padding: 0 to your ul and margin: 1px (or something) to li Also, add width: 100% to img

Upvotes: 1

Related Questions