Tips for incorporating the <li> element into a versatile layout

My dilemma involves a div containing multiple ul and li elements that are struggling to fill the available space effectively. The issue arises when there is either excess space on the right side or one of the uls gets displaced below the others due to varying screen sizes among users.

I am seeking a solution to make these ul elements more flexible so they can adapt to different screen sizes seamlessly. I want the lis to adjust accordingly when the window size is changed.

Is there a way to achieve this? Any guidance or suggestions would be greatly appreciated.

Below is some code that has already been provided based on previous advice:

<div style="max-width:100%">
       <ul style="list-style-type: none; display: inline-block; *display: inline; zoom: 1">

        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
            </ul>

       <ul style="list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
        <li><a href="#">Random Page</a><li>
            </ul>
            </div>

The challenge lies in getting these elements to align next to each other without any gaps, especially when the screen size changes...

Although Bootstrap is present on this page, I am unsure how to leverage its capabilities for this particular issue.

htmlcsshtml-lists

Answer №1

After receiving some assistance, I want to express my gratitude to everyone who helped out. I attempted to adjust the width to 25%, but encountered an issue where the elements were not aligning as expected despite reducing them to 20%. This should have allowed them to sit in a single row, so I am considering using media queries for responsiveness. Once again, thank you to all for your input.

This is the current state of my code:

Here is the jdfiddle link: http://jsfiddle.net/mbQ5P

<div style="width:100%">
    <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
    </ul>

    <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
    </ul>

    <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
    </ul>

    <ul style="width:20%; list-style-type: none; display: inline-block; *display: inline; zoom: 1">
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
        <li><a href="#">Random Page</a></li>
    </ul>
</div>

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

Update email address depending on the option chosen from the dropdown menu

My contact form includes the following fields: Name Email Number Department Message The "Department" field is a drop-down selection with seven options: Audio Engineering Graphic Design Music Production Photography Videography Web Development Other I ...

phphtmlformsemailcontact-form

Should I be decoding strings from the server like this in my JavaScript code?

When retrieving JSON data from an ASP.NET web service that has been HtmlEncoded using Microsoft's AntiXSS library (Encoder.HtmlEncode()), and returned as JSON through a jQuery Ajax call, I am faced with the task of setting this data on form inputs. O ...

jqueryhtmljsonencodingantixsslibrary

The Hover Effect fails to function properly on Internet Explorer 6

I have successfully implemented a CSS hover effect that works perfectly in all browsers except for IE6. The issue arises when I add a link to the page - the hover effect functions as expected. However, if I remove the link, the hover effect stops working. ...

cssinternet-explorer-6

Ensure each alternate div has a unique background hue

While attempting to use CSS to assign a different background color to every second div element, I encountered an issue where both divs were affected when using (odd) and none when using (even). How can this be explained? .hoverDiv:nth-child(odd) { ba ...

htmlcss

What strategies can be employed to prevent the need for custom classes for each individual paragraph or list item in order to maintain consistent styles within a

Bootstrap typically removes default paragraph margins and list styles for a cleaner look. However, there may be cases where you want to maintain the default styles for paragraphs and lists within a section of user-generated content on a Bootstrap 5-styled ...

csstwitter-bootstrapbootstrap-5

What is the best way to ensure that less2css compiles all files after saving just one less file?

In my project, I have a style.less file that imports "page.less". Whenever there is a change made to page.less, I find myself having to go back to the style.less file and save it in order for less2css to compile and apply the changes. If not, the changes ...

csscompilationlesssublimetext2

What is the best way to position two buttons side by side on a single row

Below is the code snippet: <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix modal-footer"> <div class="ui-dialog-buttonset"> <button type="button" class="btn btn-mini btn-info"> ...

htmlcssbootstrap-4

Tips for segmenting text into pages according to the dimensions of the viewport and the font style

Here's a puzzle for you. I have a horizontal slider that loads pages via Ajax, with pre-loading features to maintain smooth performance. Similar to Facebook Billboarding but with a slight twist. By determining the viewport size, I calculate boxSizeX a ...

javascriptjquerycssfonts

Tips for displaying a pop-up when pressing a link:

I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code: HTML: <!DOCTYPE html> <html> <head> ...

htmlcsspopup

The hyperlinks are not functioning correctly on my template

I'm using a template with the following preview link: The template includes an image of a laptop on the left side, with clickable points representing links. My goal is to make these points clickable so that they open specific pages like mbank.pl or ...

jqueryhtmltwitter-bootstrapcss

Name values not appearing in dropdown list

Looking for some assistance with displaying a list of names in a dropdown menu using Angular. The dropdown is present, but the names from my array are not appearing. I think it might be a simple fix that I'm overlooking. I'm new to Angular, so an ...

htmlangulartypescript

Using CSS files that are not properly imported into React components

Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...

cssreactjsreact-routercreate-react-app

Modifying the dimensions of a text input box within an HTML string using React

I'm currently utilizing a popup library called sweetalert2-react-content to generate a popup box with a textbox and a text area. Even though the elements are being created successfully, I am struggling to adjust the size of the text area in the popupb ...

htmlreactjs

Guide on selecting a <a>class within a table using Selenium for calendar interactions

My current setup involves working with 'Selenium2(WebDriver)' in Eclipse using Java. I'm trying to figure out how to click on a specific date within a table (Calendar). The issue I am facing is that every time I change the month in the cal ...

javahtmlselenium

Arranging elements in a single line using Bootstrap 4

I need to align links in a row at the bottom, such as "Link 1 left bottom", "Link 2 center bottom", "Link 3 right bottom" but "Link 2" is not centered on PC and mobile devices. HTML: <div> <a id="contact" hre ...

htmlcsstwitter-bootstrapbootstrap-4

Using background-image in Internet Explorer has always been a challenge

HTML <div id="banner" style="display: block; background-image: url('images/swirl_home.gif'); background-repeat: no-repeat; background-color: #e7e7e7;"> <div id="Hi"> some text here... </div> & ...

htmlcsscross-browser

Having issues with the JavaScript voting system {{bindings}} returning null when clicked?

It seems like the error is not appearing in the developer tool, so it might be related to how the data is being read. Both {{upVote}} and {{downVote}} start with no value and show null when clicked, indicating that the buttons are somehow linked. I was att ...

javascripthtmlangularjs

How can I align the text in a dropdown menu to the center on Safari?

How can I center the option text in a drop down menu using CSS? display: block; height: 60px; margin-left: 10%; margin-right: 10%; margin-top: 10px; min-height: 60px; text-align: center; The option text is centered in Firefox browser, but not in Safari. ...

javascripthtmlcsssafari

What is the best way to generate a search link after a user has chosen their search criteria on a webpage?

In my search.html file, I have set up a form where users can input their search criteria and click the search button to find information within a database of 1000 records. The HTML part is complete, but I am unsure how to create the action link for the for ...

javascripthtmlnode.jsexpress

Having difficulty retrieving an angular file from a location outside of the asset folder

I'm encountering issues with a small project that is meant to read a log and present it in table format. Here is the outline of the project structure: project structure Within the LOG directory, I should be able to access motore.log from my DataServi ...

htmlcssangulartypescript