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.

htmlcss

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

Applying CSS:

nav {
  display: flex;
}

Using the flex property will solve this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to submit a HTML5 form and have it displayed again on the same page?

Is it possible to simply reload the sidebar of a page containing an HTML5 form upon submission, or is it necessary to load a duplicate page with only the sidebar changed? I am unsure of how to tackle this situation; firstly, if it is achievable in this m ...

javascriptjqueryhtmlforms

Incorporate an external hyperlink into a tabPanel or navbarMenu within an R Shiny application

I am struggling with adding external hyperlinks to the tabs and dropdowns in a navbar setup using Shiny (implemented with bootstrapPage). While I have come across solutions for linking to other tabs within a Shiny app, my goal is to link to an external web ...

htmlrshiny

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

Tips for verifying user input prior to taking action

I am fairly new to internet languages and I am trying to understand how to validate user input before calling a method, but I have not been successful so far. <html> <head> </head> <body> <?php $gr ...

phphtmlformspost

Issue with the button border not functioning correctly upon hover

I'm currently practicing my HTML and CSS skills, with a focus on creating buttons. I have encountered an issue where I want a colored border to appear around the button when hovered over. Unfortunately, I seem to be stuck and unable to achieve the des ...

htmlcsspseudo-element

Why is Python BeautifulSoup's findAll function not returning all the elements in the web page

I am attempting to retrieve information from the following URL . Displayed below is the code I have developed. import requests from bs4 import BeautifulSoup url_str = 'https://99airdrops.com/page/1/' page = requests.get(url_str, headers={&apo ...

pythonhtmlbeautifulsoup

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears. ...

javascriptreactjscssmaterial-designmaterial-ui

Make the text area occupy the full width of the remaining screen space

I've been struggling to make the text area fill the remaining width of the screen. Everything is set up nicely, but I just can't seem to find a solution to get it to expand and occupy the rest of the available space. I intentionally refrained fr ...

htmlcssformstextareaflexbox

Troubleshooting a CSS problem on a table filled with images - See attached screenshots for

I've been working on a project involving my phpmyadmin database generating a series of 6 images on my website. I've placed them in a table, but now I'm facing some challenges - even though it seemed simple at first! The goal is to display t ...

htmlcsscss-tables

Why isn't the onChange function triggering in the input type text when the input is not manually typed in?

I am currently facing an issue with two text fields in my HTML form. Here is how they are set up: HTML : <input type="text" id="input1" onchange="doSomething();" disabled/> <input type="text" id="input2"/> JavaScript : function doSomething( ...

javascriptjqueryhtml

jquery to create a fading effect for individual list items

I have a group of items listed, and I would like them to smoothly fade out while the next one fades in seamlessly. Below is the code I've been working on: document.ready(function(){ var list_slideshow = $("#site_slideshow_inner_text"); ...

javascriptjquerycsslist

Intrusive JQuery Code Incorporating Itself into SharePoint 2010's HTML Markup

There seems to be an issue with my content editor web part wherein the menu, which is clickable and hoverable due to the jQuery installed, is causing some unexpected behavior. Whenever the menu is clicked or hovered over, it changes the content in the adja ...

jquerycsssharepoint-2010

When I try to open my modal in Electron by clicking on the button, it doesn't work

I was expecting the modal to open by clicking on the Edit button within #app, but it doesn't open at all! I am unsure if there is an issue with my JavaScript logic or my HTML code! When attempting to use a function for the Modal, it still does not wo ...

htmlvue.jselectron

I'm having trouble getting Jquery's insertAfter() function to function properly

After creating a parent div and using jQuery's insertAfter() method to insert additional divs, an unexpected issue arises. The first record goes to the bottom, while subsequent records are inserted above it. Below is the function in question: functi ...

jqueryhtmlinsertafter

Choosing specific elements with Selenium using OR/AND operations in Python

I am encountering an issue while working with Selenium using Python. Here is a preliminary example of my code snippet. <body> <button info="content1" aria-label="1">"Click 1"</button> <button info ...

pythonhtmlselenium

Dynamically scrolling an element using jQuery without specifying specific values

I need to keep an element fixed when scrolling on a page without setting specific height values. Do you know of any way to achieve this? Below is the code for reference: // Keep the orange box at the top after scrolling to a certain extent $(window).sc ...

jquerycss

The functionality of the .toggle method is limited to only being effective 1.5

I'm having an issue with making an image popup using the .toggle function in javascript. It seems to work initially, but then only works partially after that. When I click on the image, it opens as expected. However, when I try to close it by clickin ...

javascripthtmlpopup

Using a twig loop to display just a single table cell

The following twig loop is used to generate data: {% for reservationDate, rooms in data.pricingTable %} <tr> <td> {% for room in rooms %} <tr> <td ...

htmltwig

What steps can I take to incorporate a dropdown feature into my existing menu design?

I am currently working on a navigation menu that includes various subjects. One of the subjects is titled Equipment, and when I hover over it, Throwables and Gear appear. However, I now want to add another dropdown menu that opens when I hover over Throwab ...

htmlcssuinavigationbar

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

Looking to create a multi-level drop-down menu using TypeScript without relying on jQuery? Bootstrap CSS framework may not have exactly what you need. Wondering how to implement a multi-level dropdown in your Angular project using HTML, CSS, and TypeScrip ...

htmlcssangulartypescriptbootstrap-4