Designing numerous vertical lists in HTML

I need help with displaying multiple lists vertically using HTML

For example:

+--------+---------------------------------------------+--+
| Global | Region Country Currency Account Type Entity |  |
+--------+---------------------------------------------+--+
| Global | Asia                                        |  |
|        | Africa                                      |  |
|        | Europe                                      |  |
|        | America                                     |  |
+--------+---------------------------------------------+--+

Here is a link to my JSFiddle code. It currently displays 4 rows correctly but the last 2 rows are overlapping on the first two rows.

If anyone could assist me with this issue, I would greatly appreciate it.

htmlcss

Answer №1

Consider replacing :

ul li {
  display: inline-block;
  width: 20%;
}

With:

ul li {
  display: inline-block;
  margin-left:15px;
}

JSfiddle Sample

Answer №2

To prevent the <ul> from overlapping, I made a simple adjustment by increasing the top margin.

ul li ul {
  width: 100%;
  margin: 10px 0px;  /* By setting the margin to 10px, it creates vertical space */
  padding:0px;       /* The same effect can be achieved with padding */
}

Take a look at the updated JSfiddle for the solution in action.

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

Show information from the console logger

I'm currently working on displaying data from a database in an HTML page. While the data is showing up in my console, I'm struggling to figure out how to present it in an HTML table format. I'm unsure about the specific function that needs t ...

phpjqueryhtml

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

Display sub navigation when clicked in WordPress

I currently have the default wordpress menu setup to display sub navigation links on hover, but I am interested in changing it so that the sub navigation only appears when the user clicks on the parent link. You can view my menu here https://jsfiddle.net/f ...

javascriptjquerycsswordpress

What could be causing selenium to struggle in locating specific text on a webpage

In my webpage, I have a "tree menu" that can be opened by clicking on a button. Once the tree menu is open, I need to follow certain steps and click on different titles. For example, I would click on "19,20", then "may", and finally "2". At the top of the ...

pythonhtmlseleniumtestingxpath

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

Automating testing for numbered lists with CSS list-style-type decimal

I need help with a JavaScript and CSS project. I have a situation where I have a numbered list like this: Coffee Tea Cola Here is the code structure I am using: <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type ...

htmlcssseleniumui-automation

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

htmlcsscss-position

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

javascriptphphtmlvar

Is it possible to showcase two modals on a single page, positioning one to the left and the other to the right using Bootstrap?

Can someone help me learn how to display two modals on the same screen, one on the left and one on the right? I am new to bootstrap and would appreciate some guidance! ...

javascripthtmlcsstwitter-bootstrap

Is there a way to resize SVG images without having to modify the underlying source code?

Within my Vue Single File Component, there is a prop labeled svg, which holds a string of SVG markup like <svg>...</svg>. What is the best way to render and resize this SVG content? ...

javascripthtmlvue.jssvgvuetify.js

Error in zone: 140 - Property 'remove' is not readable

I'm brand new to kendo ui. I successfully set up a prototype in my fiddle with a working delete confirmation window. However, when I try to integrate it into my existing codebase, I encounter an error: Cannot read property 'remove' at the li ...

javascriptjqueryhtmlangularkendo-ui

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

Tips for creating unique Styles for H1, H2, and H3 with MaterialCSS by utilizing createTheme

In my application built with NextJS and styled with MaterialCSS, I have created two themes: a dark theme and a light theme using the following code: import { createTheme } from '@mui/material/styles'; export const darkTheme = createTheme({ pal ...

cssreactjsmaterial-uimaterial-designnext.js13

How can I create a responsive input group with automatic width using Bootstrap 3.1?

I am having trouble with the layout of my two floating divs. The first div contains buttons and the second div contains an input-group. However, the input-group is moving down a line instead of utilizing the available space. Here is a link for reference: ...

htmlcsstwitter-bootstrap

Text will not be visible within the div container

I'm working on a mobile layout design for my css project. My goal is to have the header and footer remain fixed on the screen while allowing users to scroll through the content in between. I was able to achieve the fixed positioning, but now none of m ...

htmlcss

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5

What is the best way to retrieve the inner HTML or text content of a tag?

How can I retrieve the text value of an anchor tag in HTML using only golang.org/x/net/html, without external libraries? In my code sample below, I am able to extract the values of href and title with html.ElementNode. However, I need a way to specifically ...

htmlgo

"Enhance Your Table Design with Zebra Cells Using CSS in rich:data

How can I achieve a zebra color effect in every other cell of a rich:dataTable using CSS? <rich:dataTable value="#{uploader.files}" var="_data" id="files"> <rich:column> <f:facet name="header"> <h:outputText ...

javacssdatatablerichfaces

Ways to switch text on and off smoothly using transitions

I have created a webpage where text starts off hidden but has a visible heading. When you click on the heading, the text is revealed below. I am putting the final touches and aiming to make the text slide in smoothly. I am using Javascript for toggling ins ...

javascripthtmlcss