Aligning/spacing the items in a list vertically

Question

Aligning/spacing the items in a list vertically

Is it possible to add vertical spacing between specific <li> tags in a navigation list using CSS only, without relying on JavaScript or JQuery?

For example: http://jsfiddle.net/ssqnY/

The spacing should adjust responsively based on the height of the containing div or window.

Here is the structure of the navigation list:

<ul>
    <li><a href="#">Link</a></li>
    <li class="spacer"></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="spacer"></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

jquery html css

Answer 1

Answer №1

Take a look at this: http://jsfiddle.net/ssqnY/1/

li.spacer {
  margin: 0 0 30% 0;
}

It also functions well for responsive design.

Answer 2

Take a look at this: http://jsfiddle.net/ssqnY/1/

li.spacer {
  margin: 0 0 30% 0;
}

It also functions well for responsive design.

Answer 3

Answer №2

To add vertical spacing to specific li elements using CSS, follow these steps: Assign your desired li with a class named spacer and then:

li.spacer {
  margin: 15% 0;
}

You can also add space to the first li:

li:first {
  margin: 15% 0;
}

Alternatively, you can give space to all li elements:

li {
  margin: 15% 0;
}

Note: The value of 15% is just an example; you can adjust it according to your preference, such as using a percentage or pixel value for responsiveness like 10px.

Answer 4

To add vertical spacing to specific li elements using CSS, follow these steps: Assign your desired li with a class named spacer and then:

li.spacer {
  margin: 15% 0;
}

You can also add space to the first li:

li:first {
  margin: 15% 0;
}

Alternatively, you can give space to all li elements:

li {
  margin: 15% 0;
}

Note: The value of 15% is just an example; you can adjust it according to your preference, such as using a percentage or pixel value for responsiveness like 10px.

Aligning/spacing the items in a list vertically

Answer №1

Answer №2

Similar questions

Is there a way to pause Javascript execution until all images are fully pre

The disparity in responseText and statusText in AJAX can vary across various servers

Adjust the size of an SVG to perfectly fit within a designated div

What is the best way to implement a date range filter in AngularJS for a specific year or month?

How to flexibly show one item on the top line and two items on the bottom line using CSS

The content inside a Textbox cannot be clicked on. I am seeking help with implementing JavaScript to enable it to be

Unraveling a Java String with HTML elements into a JsonObject: Step-by-step Guide

How to maintain the side padding of a table within a Bootstrap 4 card?

Actions for jQuery's mouseenter and mouseleave events

Create a social chat platform similar to Facebook by implementing a chat box feature with the help of AJAX, jQuery

Changing the color of text in an HTML input field using CSS and JavaScript depending on the input value

Utilize jQuery to trigger video playback based on the horizontal movement of the mouse

Utilizing jQuery DataTable with an AJAX call to retrieve data from a JSON

How can I use Moment.js to show a custom message based on the current day of the week?

Bootstrap 4 Tooltip Continues to Show, Appears Unsightly

Clearing Results Section Using JQuery and Ajax: A Guide to Implementing a Reset Button

Is it possible to capture every ajax request?

Is there a way to dynamically count the length of an element or class in realtime using JavaScript?

"HTML Parsing with Simple DOM: Dealing with Class Names Containing Spaces

Refresh the mouse's vertical position every 100 milliseconds