What is the best way to add spacing between items in an unordered list using HTML and CSS?

I have put together a list that I want to display with lines in between each word... here's the progress so far:

#header {
  position: absolute;
  width: 100%;
}
#navbar {
  position: relative;
  padding-top: 0.8em;
  padding-left: 31em;
}
ul {
  list-style-type: ;
  margin: 0;
  padding: 0;
  float: left;
}
li {
  display: inline;
  padding: 0.4em;
}
a {
  text-decoration: none;
  color: #FFFFFF;
  font-family: "Century Gothic";
  font-size: 100%;
<img id="header" src="images/headerfit.png" />
<div id="navbar">
  <ul>
    <li><a href="http://www.dimatteos.com.au">HOME</a>
    </li>
    <li><a href="http://www.dimatteos.com.au/cucina">CUCINA</a>
    </li>
    <li><a href="http://www.dimatteos.com.au/espresso">ESPRESSO</a>
    </li>
    <li><a href="http://www.dimatteos.com.au/bar">BAR</a>
    </li>
    <li><a href="http://www.dimatteos.com.au/functions">FUNCTIONS</a>
    </li>
    <li><a href="http://www.dimatteos.com.au/contact">CONTACT</a>
    </li>
  </ul>
</div>
htmlcss

Answer №1

To enhance the appearance of your list, consider adding borders:

li {
  display: inline;
  padding: 0.4em;
  border-right: 1px solid #000;  
}
li:last-child {
  border-right: none;  
}

http://jsfiddle.net/4s2ho1kj/2/

Answer №2

If my understanding is correct (though I'm not entirely sure), it seems like you're looking for spacing between each word. One way to achieve this is by using the following CSS:

li{
margin-right:10px;
} 
li:first-child{
margin-right:0px;
}

Answer №3

To create a specific visual effect, you can achieve the desired result by applying a border to the right side of each menu item except for the last one.

li { border-right: 1px solid #000000; }
li:last-child { border-right: none }

You can experiment with this concept in the following jsfiddle link and customize it according to your preferences:

http://jsfiddle.net/9qdefux6/

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

Transferring HTML content using jQuery AJAX and PHP

Can anyone help me with displaying the content of a division on one page to another? <div id="box-cont" class="box-content"> <?php echo $stat;// Includes multiple images and s ...

javascriptphpjqueryhtmlajax

Achieving Vertical Stacking and Responsive Scaling for Row and Column Containers on Mobile View Using HTML, CSS, and Bootstrap 4

Utilizing the Bootstrap grid system to organize text boxes in a 2 by 2 layout on a webpage. The desktop view displays the content in rows and columns effectively, but it would be beneficial to have an easy way to adjust the width. However, the problem ari ...

htmlcssbootstrap-4

Modify the click function from <tr> to <td> tag

I want to create an HTML page that functions as a digital library for books. Users should be able to click on a rate button to save the selected book to local storage, allowing them to see their rating whenever they revisit the page. However, I'm enc ...

javascriptjqueryhtml

Exploring the Power of DataList in Angular

I am working with a <datalist> and <select> in the following setup: Updated: Example 1: <input type="text" list="codes" [(ngModel)]="codeValue" (change)="saveCode(codeValue)"> <datalist id="codes"> <option *ngFor="let c of ...

htmlangulartypescripthtml-datalist

Switch classes according to scrolling levels

My webpage consists of multiple sections, each occupying the full height and width of the screen and containing an image. As visitors scroll through the page, the image in the current section comes into view while the image in the previous section disappe ...

javascriptjqueryhtmlcss

Having a solid grasp of React and Material UI, as well as familiarity with the concept of props and

For my react application, I utilize Material UI (@mui/material). However, I've come to realize that there might be some nuances in how the components interact with each other. For instance, if I nest a MenuItem inside a Box or a Link inside a Typograp ...

javascriptcssreactjsmaterial-uistyling

Show HTML element after scrolling 50 pixels on the page

I am looking to add a feature in my Angular application where a DOM element becomes visible as soon as the user scrolls down by 50 pixels. Is there a method or process available within Angular to achieve this effect? ...

cssangularjsscrollangularjs-directive

Display a pair of divs by utilizing the select option tag element alongside a submit button

Yesterday, I posted a similar question in a different format. Today, I am looking for the same question in a new format. Let me explain: I have several div elements on a page. When I choose an option from a dropdown menu and click submit, I want to disp ...

jqueryhtml

Displaying or concealing list elements in Angular 6

I am working on a simple Angular app that displays a list of items. I want the behavior to be such that when the first item in the list is clicked, its description (card) should be displayed. And, if the second item is clicked and its description is displa ...

javascriptangularhtmltypescriptbootstrap-4

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

One div on Chrome for Mac is experiencing an issue with applying the background image

I currently have a website hosted on GitHub pages at this link: When viewing the site on Windows Chrome, the bottom div containing the filtering buttons blends seamlessly with the dark grey background set in the wrapper div. However, when viewed on Mac Ch ...

javascripthtmlcsswebd3.js

Tips on using Bootstrap 4 containers within a container-fluid and ensuring text stays within a container at all times

What is the best way to incorporate a Bootstrap 4 container within a container-fluid? how can we ensure that text is always contained within the blue section? ...

javascripthtmlcssbootstrap-4

The HTML select element - Styling the selected item using the option font

Currently, I am working on adding a font dropdown list to a web page. Each option in the dropdown list is styled with the corresponding font it represents like this:- <option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans ...

htmlcssuser-interface

Press one button to activate another button

I am looking to activate a button's class by clicking on another button. The button I have is: <button class="clear-cart banner-btn">clear cart</button> This button is used for clearing a cart. On the order confirmation page, I click on ...

javascripthtmlbutton

Percentage-based framework for CSS grid system

Exploring the world of CSS grids has been a fascinating learning journey for me. After delving into my research and consulting resources like: http://css-tricks.com/dont-overthink-it-grids/ I've noticed that percentage-based grids generally make the ...

css

What is the best way to manage font size on an HTML webpage?

In a scenario where I specify font-size = 25px along with a specific font-family, my intention is to display a character that is exactly 25px on the HTML page. However, the rendered character's size may be slightly different, such as 27px or another v ...

htmltypesetting

Not every situation calls for the same type of styling

I am struggling to override the CSS for <h1> and <h2> using specific selectors only. The changes are only being applied to one class, with <h1> changing color to green but not <h2>. Can someone please assist me in identifying where ...

css

Images with scratches visible in Chrome

This puzzle may seem easy to some, but it's been quite challenging for me. I've encountered a discrepancy in how Firefox and Chrome render images (specifically technical drawings). Despite my attempts to use image-rendering: -webkit-optimize-cont ...

cssimage

The parent div will not accommodate two nested divs

I'm having an issue with two divs inside a parent div not being contained within the container when I inspect the page, even though I've wrapped the div around the other 2 divs. My goal is to apply attributes to the parent div instead of each in ...

htmlcss

Discrepancies in Flexbox Handling of Images between Chrome and Firefox

My goal is to showcase images on a flexbox grid, and while it works perfectly in Chrome, I'm encountering issues in Firefox (uncertain where the problem lies). Check out the CodePen link for reference : https://codepen.io/anon/pen/QJNajw?editors=1100 ...

htmlcssflexbox