Arranging several lists in a row without any specific order

Question

Arranging several lists in a row without any specific order

I am trying to arrange multiple <ul> elements on the same line to create a shop-like display for products. Currently, I have set up several 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>

Is there a way to achieve this? Currently, the lists are displayed vertically, but I want to change this layout.

html css

Answer 1

Answer №1

To achieve the desired effect, you can apply the following CSS rule: ul {display:inline-block;}.

Remember that using width="20%" height="20%" on an image might not produce the expected outcome. This is because percentage width or height is always relative to the container's width, not the image itself.

In the example below, I have opted for a fixed width for simplicity.

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>

Answer 2

To achieve the desired effect, you can apply the following CSS rule: ul {display:inline-block;}.

Remember that using width="20%" height="20%" on an image might not produce the expected outcome. This is because percentage width or height is always relative to the container's width, not the image itself.

In the example below, I have opted for a fixed width for simplicity.

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>

Answer 3

Answer №2

Applying CSS:

nav {
  display: flex;
}

Using the flex property will solve this issue.

Answer 4

Applying CSS:

nav {
  display: flex;
}

Using the flex property will solve this issue.

Arranging several lists in a row without any specific order

Answer №1

Answer №2

Similar questions

Dynamic Data Display

What is the best way to apply a png overlay to each img tag when hovered over?

Tips for securely storing visitor-entered form data on our computer from our webpage

I find it frustrating that Angular consistently redirects me to the login page every time I attempt to navigate to a different page

Alteration of Content Height Input

Click on the logo to return to the home page

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

`Positioning of inline-block elements`

JavaScript: Understanding the concept of closure variables

Continue scrolling once you reach the fixed-positioned div

What is the best method for arranging various react components in sync?

Mobile device causing issues with appendTo function

Expand the background of columns to cover grid gutters

Interactive state for associated product within list without order

Ways to resize column widths in tree views on Odoo version 10?

PHP Script unable to locate results

Creating a unique and personalized dual-row navigation bar using Bootstrap

Is it possible to disregard text formatting in Python when using Selenium?

Is the "add" feature malfunctioning?

Is it possible to refresh the chat-box using PHP?