What is the best way to line up <li> elements on a single axis within a <ul> list?

I have configured a ul element to serve as my navigation bar using HTML and CSS:

HTML:

<ul id="list-nav">
  <li><a href="index.html"><img src="http://s20.postimg.org/w5uddizg9/small.png"></a></li>
  <li><a href="Marsrutas.html">Maršrutas</a></li>
  <li><a href="Nuotraukos.html">Nuotaukos</a></li>
  <li><a href="Apie zygi.html">Apie žygį</a></li>
  <li><a href="Apie mane.html">Apie mane</a></li>
  <li><a href="Dviraciai.html">Dviračiai</a></li>
  <li><a href="Kontaktai.html">Kontaktai</a></li>

CSS:

ul#list-nav {
  margin:auto;
  padding:0;
  list-style:none;
  width:525px;
}
ul#list-nav li {
  display:inline;
  text-align: center;
}
ul#list-nav li a {
  text-decoration:none;
  padding:5px 0;
  width:auto;
  color:#eee;
  float:left;
  margin:5px;
}
ul#list-nav li a {
  text-align:center;
  border: 1px solid transparent;
}
ul#list-nav li a:hover {
  border-width: 1px;
  border-style: solid;
  border-color: #FFFFFF;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Fiddle

The issue I am facing is that all li elements appear aligned at the top of the page. Is there a way to align them along one axis instead?

(Please forgive any language errors, English is not my first language)

jqueryhtmlcssnavbar

Answer №1

Check out the solution with this code: http://jsfiddle.net/lotusgodkk/6hPLK/7/

   ul#list-nav {
        margin:auto;
        padding:0;
        list-style:none;
        width:525px;
        display:block;
    }
    ul#list-nav li {
        display:inline;
       text-align: center;
        vertical-align:middle;
    }
    ul#list-nav li a {
        text-decoration:none;
        padding:5px 0;
        width:auto;
        color:#eee;    
        margin:5px;
        display:inline-block;
        vertical-align:middle;
    }
    ul#list-nav li a img {
        vertical-align:middle;
    }

We removed float from anchors and used display:inline-block. Also added vertical-align:middle to image, li, and anchors.

Answer №2

ul#list-nav {
    margin: auto;
    padding: 0;
    list-style: none;
    width: 525px;
    display: table;
    }

ul#list-nav li {
  display: table-cell;
  vertical-align: bottom;
}

This code snippet ensures that the list items align along a single axis as needed :)

Wondering what it does?

By applying table to the ul and table-cell to the li, the list items are aligned on the same axis. Using vertical-align: bottom specifies the alignment of the axis.

If you meant to center the list items vertically, simply replace vertical-align: bottom with vertical-align: middle. This flexibility allows for easy customization based on your preferences :)

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

Creating a tooltip using JQuery for a text input field - a complete guide

Is there a way to create a tooltip for a textbox? I'm looking to achieve something similar to the image below: I would like the tooltip to be located near the right of the textbox, with some added animation. Any ideas or suggestions are welcome. ...

javascriptjquery

Is it possible to utilize hCard for semantic markup exclusively for a business's contact information?

Can hCard be used to markup a business's contact information without including a personal name? According to the hCard guidelines, a name is required in the format (e.g. John Doe): . I am specifically trying to mark up just a business's contact d ...

htmlsemanticssemantic-markupmicroformats

Arrange information into sections

This Angular code is used to format text into profile page as blocks of data: <div class="element-box"> <div class="details-wrapper"> <p><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</p> <p>< ...

htmlcssangulartypescript

What is the method to create an HTML div with a sloping edge?

my HTML & CSS code looks like this: https://i.sstatic.net/8vIaZ.jpg I would like it to look more like: https://i.sstatic.net/O9SA6.jpg Any tips on how I can achieve this?... ...

htmlcss

Is there a way to store a class property as a variable using PostCSS?

Looking to store a dynamic property in a variable for use with calc(). There is a class with a height that changes dynamically. .cuerpo-detalle { height: x; } The goal is to create a variable that captures the height property of the .cuerpodetalle cla ...

javascriptcsspostcsscssnext

Trouble with AngularJS 1.x: radio buttons not displaying as checked

I am currently enhancing a form to include two sets of radio buttons that toggle panels on and off. The first set allows users to choose between contacting the customer ("Yes") or not ("No"). If "Yes" is selected, then they are prompted to specify whether ...

htmlangularjsformsradio-button

Horizontal alignment of Inline Block Elements is not achieved

Having trouble with the alignment of a form on a test site? Check out the form located under the div#search-bar. If you inspect the element, I have applied the following CSS: div.nf-field-container { width: 201px; display: inline-block; margin: ...

csswordpressinput

Node.js provides a straightforward way to decode HTML code

Can strings with HTML-encoded characters like &#39;, &amp;, etc., be converted into plain character strings without using multiple str.replace(/&#39;/g, "'") statements? ...

htmlnode.js

Here is a way to prevent the focus event from being called when leaving a page

Here's the code snippet I'm working with: $('#search_user').keyup(function() { alert('hello keyup'); }).focus(function() { alert('hello focus'); }).blur(function() { alert('hello blur'); }); T ...

jqueryfocus

How can I detect click events in individual button-like areas on an image sprite using JQM?

When using Jquery Mobile, imagine having 2 button-like elements in an image sprite. These buttons need to be custom buttons within the image sprite: --------- | button1 | --------- | button2 | --------- 1.) How can I detect click events for each butto ...

javascriptjquerycssjquery-mobile

Is there a way to retrieve the highlighted variables from this JSON(p) response using jQuery?

My JSON data feed contains the following: { "responseHeader": { "status": 0, "QTime": 3, "params": { "indent": "true", "q": "content_de:text", "_": "1380870078953", "hl.simple.pre": "", "hl.simple.post": "", "hl.fl": "title_de,content_de,url_ ...

jqueryjsonjsonp

Specifying the data type of the input being passed into a .css() function within a jQuery ID selector

Currently, I am facing an issue where I need to position an element below a fixed toolbar. The amount of top-padding required for this positioning varies based on the viewport width. To address this, I have created a formula that calculates the percentage ...

javascriptjquerycssangularjstypescript

Is it possible to dynamically set the body id in React?

I'm currently working on implementing a dark mode feature in my app. The plan is to insert the following code into the root element: <div id="dark"> Afterwards, add the following CSS: #dark { background-color: #1A1A2E; } Subseq ...

htmlcssreactjsdombootstrap-4

What is the best method for uploading photos via ajax in a django application?

Currently, I am in the process of creating a function that allows users to update their profiles by changing their email addresses, names, and profile pictures. While I have been successful in updating emails and names, I have encountered difficulties in u ...

jqueryhtmlajaxdjango

Tips for properly binding events in JavaScript using the strict mode for better coding practices

Can someone please help me with this issue? Here are some tips to improve your code: 1) Utilize the .on() method for event binding instead of .click(), .bind(), .hover(), etc. Event delegation is recommended for better performance and cleaner code. 2) U ...

javascriptjquery

Changing the backdrop hue behind the dropdown menu items to give a fresh look

Objective I aim to change the background color and restrict scrolling when a dropdown is opened. It should have a distinct color from the header, disabling scrolling until the dropdown is closed. Challenges Faced and Solution Attempted To prevent scroll ...

javascriptjqueryhtmlcss

How to Create Django Templates without Including head, body, and Doctype?

Is it considered the correct or recommended practice to omit the Doctype, head, and body tags? This is a question that arises when looking at examples like tutorial 3 in the Django documentation which can be found here, specifically in the polls/template ...

pythonhtmldjango

Designing a CSS dot leader on the top line against a intricate backdrop

I am looking to incorporate dot leaders after the first line of text using CSS so that it can be used over a texture or image background. Expected behavior: https://i.sstatic.net/6Jsrk.png I have come across a few implementations of dot leaders on the i ...

htmlcssflexbox

Unable to trigger facebox popup using onclick function in IE8

Currently, I am developing a website that makes use of Facebox to load content during the basket process. However, I've encountered an issue specifically with Internet Explorer 8 when trying to load content after clicking the green wishlist button. T ...

javascripthtmlinternet-explorer-8facebox

Retrieve information related to an image from a database using JQuery hover based on the image's ID

I have a 'post' row in my database where all the published posts are stored. Each post contains an id, image, title, and description. I fetch it onto the main page using a while loop and I am looking to implement a hover effect on each image that ...

phpjquery