Exploring HTML list with padding to determine optimal wrapping configurations

Having an issue with a section of links. The blocks for the links are lining up next to each other when the viewport is wide, but I want one block labeled MOBOT to drop down onto a new line in a small responsive space.

The goal is for the MOBOT square to clear the first line of squares completely, like the link below Apologies for the hack together illustrator screenshot.

Here is my html:

    <h4 class="sub-head-top">Quick Links</h2>
    <ul class="traditions"> 
        <a href="#booth"><li class="quicklink">Booth</li></a>
        <a href="#buggy"><li class="quicklink">Buggy</li></a>
        <a class="last" href="#mobot"><li class="quicklink">Mobot</li></a>
    </ul>

And here is my css:

    ul.traditions {
        padding-top:12px;
        padding-bottom:10px;
    }

    ul.traditions li {
        display: inline;
        list-style:none;
         }

    ul.traditions li.quicklink   {
        background-color:#37BEEC;
        font-family:'Montserrat', Arial, Helvetica;
        text-transform:uppercase;
        font-size:.8em;
        letter-spacing:.1em;
        color:white;
        font-weight:bold;
        padding:15px 18px;
        text-decoration: none;
    }

    ul.traditions a   {
        color:white;
        text-decoration: none;
        margin:0px 13px 0px 0;
    }

    ul.traditions a.last   {
        margin:0 0px 0px 0;
    }

Any advice on adjusting padding/margins or anything else in my code? My coding knowledge is limited, so any help would be appreciated!

Thanks!! :)

htmlcsshtml-lists

Answer №1

An error in the syntax has been identified - An element cannot be placed directly within a <ul> unless it is enclosed in an <li> tag. In this case, there is a <a> tag wrapping around the <li> tag which is incorrect. Additionally, there is an opening <h4> tag without a corresponding closing <h2> tag.

See DEMO here: http://jsfiddle.net/x8dSP/2624/

<h4 class="sub-head-top">Quick Links</h4>
    <ul class="traditions"> 
       <li class="quicklink"><a href="#booth">Booth</a></li>
        <li class="quicklink"><a href="#booth">Booth</a></li>
        <li class="quicklink last"><a href="#booth">Booth</a></li>
    </ul>

Answer №2

Revise your CSS for ul.traditions li as shown below:

CSS

ul.traditions li {
    display: inline-block;
    list-style:none;
    margin-bottom: 15px;
}

To achieve the desired layout, ensure that the li elements are styled as inline-block with a specified bottom margin for consistent spacing.

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

What could be causing the href to malfunction on my local website?

I'm currently working on adding a new link that directs to a local HTML website within a menu list on a website. The main website is in ASPX format, but my focus is on the HTML version. The link I want to add leads to an HTML website stored on my loca ...

javascriptasp.nethtmlpermissions

Having the `overflow:auto` property conceals additional content

I've been experimenting with a demo on my website that incorporates snap.js and chart.js. Check out the demo on JSFIDDLE here After adding some JavaScript to show chart.js content while scrolling, I encountered a problem with the CSS style on line 1 ...

javascriptcssoverflow

Struggle with the accordion collapse animation in Bootstrap4?

My implementation of accordion collapse in Bootstrap 4 is functional, but lacks smoothness. Can anyone offer suggestions on how to improve this? I have attempted to nest divs inside each other, but it has not yielded the desired outcome. Below is the code ...

htmlcssbootstrap-4

Create a fresh CSS class using the Chrome developer tool

Can a brand new CSS class be inserted in Chrome dev tools in this way? .myclass { background-color: yellow; } ...

cssgoogle-chromegoogle-chrome-devtools

Issues with Media Query in Mobile Device Footer not Resolving

Despite searching through numerous pages on Stack, I have not been able to find a solution. I am attempting to remove the footer on mobile devices using a media query. Unfortunately, it does not seem to be effective on the device, although it works when th ...

phpcssmedia-queries

Is it possible to view the CSS of a PDF file in print template mode using Chrome?

https://i.stack.imgur.com/XlcWm.png Currently facing an issue with debugging CSS on my PDF template. I am unable to inspect the styles directly in the CSS due to limitations. When using inspect element in Chrome, only the styles for text and elements are ...

htmlcssgoogle-chromefirefoxgoogle-chrome-devtools

Tips for making an image box with a rollover effect

I need help figuring out how to create a unique user experience within a container that is 500px wide and 800px tall. The container currently has an image as a background, and I want to add a "sign up" button in the middle. When this button is clicked, I w ...

javascriptimagehtmlwidgetrollover-effect

Is it possible to determine if a web page is designed for a personal computer or a

Is there a way to identify whether a given URL is intended for PC or mobile devices? I have a collection of URLs, and I need to determine if each one corresponds to a PC or mobile version. Is there any specific HTML element or marker within the page sour ...

htmlweb-crawlerrd

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

A scenario I am working on involves a Login jsp that accepts a user email and sends it to a servlet. If the provided email is not found in the database, the servlet redirects back to Login.jsp with an attribute "error". Within the header of Login.jsp, ther ...

javascripthtmljspbrowserscriptlet

Can the border become fainter and then more pronounced when hovered over?

Does anyone know of a simple method to create a fading effect for a CSS border-bottom when hovering over an image, and then have the border fade out once the hover is removed? <div class="hover"> <img src="images/ex.jpg"/> </div> ...

jqueryhtmlcss

Utilizing LocalStorage in an Ionic application to store data on a $scope

Having trouble saving the array named $scope.tasks to LocalStorage while building a To Do List app. Tried multiple times but can't figure it out. Here's the code, appreciate any help :^) index.html <!DOCTYPE html> <html> <head& ...

javascripthtmlangularjscordovaionic-framework

Adding elements within a loop using jquery

I am currently working on adding a toggle button using Javascript. I want to include three span tags inside it as well. To achieve this, I am creating a span variable and attempting to append it within a basic FOR loop that iterates 3 times. Below is the ...

javascriptjqueryhtml

Using JavaScript to Transmit URL

Imagine I have a URL similar to this: http://localhost:8000/intranet/users/view?user_id=8823 All I aim to achieve is to extract the value from the URL using JavaScript, specifically the user_id (which is 8823 in this instance), and transmit it through an ...

javascripthtmliframe

The inputs are not responding to the margin-left: auto and margin-right: auto properties as expected

I'm having trouble aligning an input in a form to the center. Even though I have included display: block in the CSS, using margin-left:auto and margin-right: auto is not yielding the desired result. To illustrate the issue more clearly, I've cre ...

csshtml

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text? I tried using the following CSS selector: .my-class *:not(input[type="text"]) { // Some CSS properties here } However, this do ...

htmlcsscss-selectors

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

htmljquery

Reveal each element individually upon clicking the button

I am trying to display 5 div elements one by one when clicking a button, but the current code is not working. I am open to alternative solutions for achieving this. Additionally, I want to change the display property from none to flex in my div element. ...

javascripthtml

Personalizing HTML input fields

I am looking to create a contact form that will display an image depending on whether the input entered is correct or incorrect. My goal is to achieve this using only HTML and CSS, without needing any JavaScript. While there are similar posts on this topic ...

htmlcss

Set a click listener on a button within Ext.window.MessageBox

Currently, I am dynamically generating a message box using Ext.window.MessageBox. var msgBox = Ext.create('Ext.window.MessageBox', { title: '', //message in window msg: 'message text', icon: ' ...

javascriptjqueryhtmlextjs

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

javascriptcssreactjstext-alignment