How can I make sure that the 3 unordered lists are aligned at the top of the div when they are in the

I am trying to display 3 ul lists in one line using Bootstrap classes. Each ul is populated with links from a database using the Razor Engine. The number of links in each list may vary, so how can I align them like the image shown?

Demo: http://jsfiddle.net/rygu8pqd/

https://i.sstatic.net/37ewF.jpg 

<ul style="text-align:center;list-style-type:none;">
    <li>
        <a>item1</a>
    </li>
    <li>
        <a>item1</a>
    </li>
</ul>

</li>
</ul>
<ul style="border-right:2px red solid;border-left:2px red solid; text-align: center; list-style-type: none; display: inline-block" class="list-group">


    <li class="list-group-item">

            <ul style="text-align:center;list-style-type:none;">
                <li>
                    <a>item2</a>
                </li>
                <li>
                    <a>item2</a>
                </li>
                 <li>
                    <a>item2</a>
                </li>
            </ul>

    </li>

</ul>
<ul style="text-align: center; list-style-type: none; display: inline-block" class="list-group">

    <li class="list-group-item">

            <ul style="text-align:center;list-style-type:none;padding-top:15px;">
                <li>
                    <a>item3</a>
                </li>
                 <li>
                    <a>item3</a>
                </li>
                 <li>
                    <a>item3</a>
                </li>
                 <li>
                    <a>item3</a>
                </li>
            </ul>

    </li>
</ul>
htmlcsstwitter-bootstraplisthtml-lists

Answer №2

Check out this snippet of HTML code:

<ul>
    <li><a href="">First item</a></li>
    <li><a href="">Second item</a></li>
    <li><a href="">Third item</a></li>
</ul>
<ul>
    <li><a href="">Fourth item</a></li>
    <li><a href="">Fifth item</a></li>
    <li><a href="">Sixth item</a></li>
    <li><a href="">Seventh item</a></li>
    <li><a href="">Eighth item</a></li>
</ul>
<ul>
    <li><a href="">Ninth item</a></li>
    <li><a href="">Tenth item</a></li>
</ul>

This is the related CSS Code:

ul{
    list-style: none;
}

ul{
    display:inline-block;
    vertical-align: top;
    border:1px solid black;
    padding-left:0px;
}

ul li{
    padding:10px;
}

ul li a{
    text-decoration: none;
}

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

Easily implement a JavaScript function to enable full-screen YouTube video playback with a single click

Looking for a simple JavaScript function that plays YouTube videos in fullscreen mode upon clicking, without utilizing the YouTube API. The current setup works well but I am aiming to achieve this using pure JavaScript and an onclick event trigger. < ...

javascriptjqueryhtmlyoutube

When a specific item is selected from a drop-down menu, text boxes and drop-downs will dynamically appear and change

In the current version of my code, there is a single drop-down menu with three options for the user to select from. If "Complete" is chosen, a text box should appear. If "Abandon" or "Transfer" is selected, a separate drop-down menu needs to be displayed. ...

javascripthtmldrop-down-menudom-events

Is there a way to transfer the selected item's id from the dropdown to the Django form action URL?

Issue My problem is that I need to pass the ID from the selected transaction item in the dropdown to the form action URL 'cart_add'. I have successfully retrieved the ID from the selected dropdown value, but I am struggling to pass this ID to the ...

javascripthtmljquerydjangodjango-templates

Troubles with Placing Image on WordPress

Working on a Wordpress component for a website where I placed a "SOLD OUT" image over text. However, the issue arises when viewing the site on mobile devices, as the images are smaller and not in their correct positions due to using absolute positioning. ...

htmlcsswordpress

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

I have inserted a code snippet that highlights my issue. I am attempting to ensure that the .navigation element remains fixed at the top of the colored divs, however, when using 'right: 0;', the .navigation element seems to shift to the right sid ...

htmlcss

Organize table cells based on decimal places

Organize the table cells based on their decimal points. Plunker Sample JSON: [ { "data1": [ { "name": "Download", "id": "1.1.1" }, { "name": "Download", ...

javascripthtmlangularjs

JQuery is not able to render Hindi content properly

I am attempting to showcase some Hindi words using JQuery because these are essential contents that need to be displayed on every page of the website. Please note that this is a static website built with HTML and JQuery/JavaScript. Below is my JS file: in ...

javascriptjqueryhtml

Google Chrome's number input type trims its rendering

When using the number input type in Chrome, the appearance of the input boxes is different, with the numbers appearing bottom-trimmed. Is there a way to fix this issue without adjusting the size of the input controls? Any assistance would be greatly appre ...

htmlcssgoogle-chromewebkit

CSS: The hiding should only apply to specific sections of my menu

I'm having trouble hiding a portion of my menu. Whenever I use the display:none property, the entire menu disappears. I have assigned IDs to different elements to distinguish them, so I'm not sure why this is happening. Here's the code snipp ...

htmlcss

Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't ...

cssreactjstailwind-css

Get the file from the web browser

Hey there, greetings from my part of the world. I have some straightforward questions that I'm not sure have simple answers. Currently, I am working on a web application using the JSP/Servlet framework. In this app, users can download a flat text fil ...

javajavascripthtml

Problem with a dynamic section on a single-page site

I'm currently working on building my very first single-page website. If you want to check out the jsfiddle for it, here's the link: http://jsfiddle.net/dgfhjxLt/ The main issue I'm facing is related to the first div section. When a user sc ...

jquerycss

Establish the directory for javascript and css files following the designated URL rewriting regulations in the .htaccess file

Currently in the process of rewriting my URLs by configuring rules in the .htaccess file. The current version of my .htaccess file looks like this: Options +FollowSymlinks RewriteEngine on AddType text/css .css RewriteRule ^lunettes-collection/([ ...

javascriptphpcss.htaccessurl-rewriting

What is the technique for determining the scale percentage of an image with the background-size property set to cover?

I am trying to determine the scale of an image after it has been resized. By using background-size: cover on the body background image, I want to ensure that the image maintains its aspect ratio and expands or shrinks to fit both the width and height of t ...

cssbackground

Is there a way to access a comprehensive list of all the font names stored on my personal computer?

I'm currently working on a project that requires using local fonts only. Since I am using a Mac, I have located the fonts in /Library/Fonts. However, I have encountered an issue when trying to use a font named 华文黑体 directly in my CSS property: ...

cssfonts

Unable to duplicate content from Owl carousel items

Currently utilizing the owl carousel on my website to showcase carousel content featuring coupon codes. The problem I am facing is that I am unable to copy these coupon codes from the website. Here is the carousel code snippet: <div id="TopAirLine" cl ...

jqueryhtmlcssowl-carousel

Can simply adding Bootstrap CDN make a website responsive?

Is Bootstrap truly self-sufficient when it comes to responsive design, or do custom webpages utilizing Bootstrap require additional responsive instructions? If I incorporate the Bootstrap CDN and utilize its built-in components, can I assume the webpage ...

csshtmltwitter-bootstrapcdn

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

htmlcsscross-browseropera

Setting expiration dates for cached images

I am interested in optimizing the loading speed of my webpage by setting an expiration date for images. However, I am unsure about where to specify this. The images on my website are loaded via CSS from Cloudfront using an S3 bucket in AWS. Can you provid ...

cssamazon-web-servicesamazon-s3amazon-cloudfront

What is the best way to trigger a javascript modal to open automatically after a specific duration

Let's take an instance where my modal has the ID #modal1. It usually appears through a button-based action. ...

javascripthtmltwitter-bootstrapbootstrap-modal