Align multiple unordered lists on the same line

Question

I want to put multiple <ul> on the same line, simulating products in a shop. So far I've got multiple unordered list tags:

ul {
  display: inline;
}
li {
  list-style: none;
}

<ul>
  <li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
  <li>Name</li>
  <li>Author</li>
</ul>
<ul>
  <li><img src="http://au.alexu.edu.eg/English/Academics/PublishingImages/Central%20Library%20Logo%20Design%20-%20English.png" width="20%" height="20%" /></li>
  <li>Name</li>
  <li>Author</li>
</ul>

How can I accomplish this? I have them show vertically but I dont want them this way.

Answer 1

You could set it to ul {display:inline-block;}.

Be aware of width="20%" height="20%" on the image in your example, it may give you unwanted results. As percentage width or height is always relative to container's width, not itself.

For simplicity, I just use fixed width in the demo below.

ul {
  display: inline-block;
  vertical-align: top;
  padding-left: 0;
}
li {
  list-style: none;
}

<ul>
  <li><img src="//dummyimage.com/100"></li>
  <li>Name</li>
  <li>Author</li>
</ul>
<ul>
  <li><img src="//dummyimage.com/100"></li>
  <li>Name</li>
  <li>Author</li>
</ul>