What methods can I use to expand the horizontal spacing between items in my list?

Struggling to create the right spacing in my inline list so that they don't appear squished together. I've experimented with word spacing and adding padding to the header links, but no luck. Interestingly, the only way I could get my list (shop, products, faq, blog) to display inline and centered was by listing them backwards. For instance, when I write

  • blog
  • faq
  • products
  • shop
    • , it appears as shop, products, faq blog. Is there a way to maintain the correct order in the HTML while still displaying them inline? Any advice would be greatly appreciated. Thanks! BTW, I have 

    * {
  padding: 0px;
  margin: 0px
}

    already

    #header-flex {
      display: flex;
      position: fixed;
      background: rgb(0,191,255);
      height: 75px;
      width: 100%;

    }

    header a {
        display: inline-block;
        float: right;
    }

    header li a:hover {
      color: orange;
      cursor: grabbing;
    }

    nav p a:hover {
      color: orange;
      cursor: grabbing;
    }

    .left, .mid, .right {
        float: left;
        width: 33%;
    }
    
        <header>
      <nav id="header-flex">

        <div class="left">
          <img src="logo.jpg" alt=logo width="30px" height="30px">
        </div>

        <div class="mid">
          <ul>
            <li ><a href="___">Blog</a></li>
            <li ><a href="___">FAQ</a></li>
            <li ><a href="___">Products</a></li>
            <li ><a href="___">Shop</a></li>
          </ul>
        </div>

        <div class="right">
          <p><a href="___">Sign In</a></p>
        </div>

      </nav>
    </header>

    htmlcssflexbox

    Answer №1

    Check out the updated code snippet below

    #header-flex {
      display: flex;
      position: fixed;
      background: rgb(0,191,255);
      height: 75px;
      width: 100%;

    }

    header a {
        display: inline-block;
        float: right;
    }

    header li a:hover {
      color: orange;
      cursor: grabbing;
    }

    nav p a:hover {
      color: orange;
      cursor: grabbing;
    }

    .left, .right {
        float: left;
        width: 25%;
    }

    .mid {
        float: left;
        width: 50%;
    }

    .mid ul{
        padding: 0;
        text-align: center;
    }

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

   .mid ul li a{
        float: none;
        padding: 0 6px;
    }
        <header>
      <nav id="header-flex">

        <div class="left">
          <img src="logo.jpg" alt=logo width="30px" height="30px">
        </div>

        <div class="mid">
          <ul>
            <li ><a href="___">Shop</a></li>
            <li ><a href="___">Products</a></li>
            <li ><a href="___">FAQ</a></li>
            <li ><a href="___">Blog</a></li>
          </ul>
        </div>

        <div class="right">
          <p><a href="___">Sign In</a></p>
        </div>

      </nav>
    </header>

    Answer №2

    If you require another order, why not consider the following format?

    <div class="mid">
      <ul>
        <li ><a href="___">Shop</a></li>
        <li ><a href="___">Products</a></li>
        <li ><a href="___">FAQ</a></li>
        <li ><a href="___">Blog</a></li>
      </ul>
    </div>

    Alternatively, if there is something I missed or did not understand

    For creating horizontal space, use this CSS:

    .mid li {padding: 0px, 10px,0px,10px;}

    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 is the proper way to attribute the individual who uttered the quote in order to display it on your document effectively?

    I inserted a quote into my document, see below: Unfortunately, the text for Fred Beecher, Director of UX, is not appearing directly under the quote in my document. The issue seems to be related to a fixed footer containing social media icons positioned at ...

    htmlcssxcodetagsfooter

    Embed one div within another div in a flexible layout design

    I am working on a design where I need to place a div (profile picture) inside another div (profile banner) in a way that the profile picture is slightly outside of the outer div. This may sound complicated, but I only need it to display this way on desktop ...

    htmlcss

    Verifying if a number is present in a textbox when inserting text (without using setTimeout)

    I have an input field similar to the one shown below: <input type ="number" id="numberTxt" placeholder="Number Only"/> To ensure that the value entered is a number, I am using the following function with the keypress event: <script> ...

    javascriptjqueryhtmlevents

    Methods for aligning navbar links vertically when incorporating an oversized icon

    When utilizing Bootstrap 5 with Bootstrap Icons, I decided to increase the size of the icon using font-size:1.5rem;. However, this caused a disruption in the vertical alignment for the links (It works fine when the styling is removed and Full Page mode is ...

    csstwitter-bootstrapbootstrap-5bootstrap-icons

    Difficulty in displaying Font Awesome Unicode on website

    I am struggling to populate a list with Font Awesome icons 4.7.0 in my HTML code using Bootstrap. Strangely, only the first icon is displayed while the rest remain invisible. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font- ...

    csstwitter-bootstrapbootstrap-4iconsfont-awesome

    Select two images and simultaneously move them around on a webpage

    Looking for a way to replicate the functionality shown in this image - when I drag one map, another one should automatically move as well. Additionally, the downtown map needs to be contained within the mobile frame. The two map images are located in sep ...

    javascriptjqueryhtmlcss

    Access the document on the desktop and open it in a new popup window

    As a novice in html coding, I'm wondering if it's possible to write window size and other properties directly into the page. Let me explain. I'm currently working on a calculator and I want to run the HTML file on my desktop. Everything wor ...

    javascripthtmlpopupwindow

    CSS Attribute Selector Wildcard Capture Tool

    Suppose I have the following HTML structure: <div class="tocolor-red"> tocolor </div> <div class="tocolor-blue"> tocolor </div> <div class="tocolor-green"> tocolor </div> <div class="tocolor-yellow"> tocolor ...

    javascriptcss

    Using the <li> element as the primary container for a series of <li>'s within a <ul> is

    For my form requirement, I am utilizing Jotforms. After downloading the code, I am currently in the process of customizing the CSS and HTML to fulfill my design needs. Jotforms uses a set of ul , li for managing its HTML structure. However, I encountered ...

    htmlcssjotform

    Is it possible to showcase CSS and JavaScript code exactly as it appears when the files are saved in their respective formats, but embedded within an HTML

    Recently, I've been working with notepad++ and have come across an interesting challenge. In my index.html file, I have embedded css and javascript code. Is there a way to display this code as it appears when saved in their respective files, but maint ...

    javascripthtmlcss

    Is SCSS automatically compiled into CSS by VSCode?

    In the tutorial I followed, the instructor mentioned clicking a button at the bottom of the window to create a CSS file with the 'Live Sass Compiler' extension in VSCode. However, despite following the instructions, the compilation does not seem ...

    htmlsass

    Utilize the Bootstrap column push-pull feature on the mobile version of

    https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

    javascripthtmltwitter-bootstrapcss

    Using Jquery to update a link with a different value

    I'm currently pulling data from a database and inserting each link into a new table row. I've created a jQuery function to update the href of the links, but unfortunately, it's not functioning as expected. It's worth noting that every ...

    javascriptjqueryhtmlhref

    Is there a way to switch between different ag-grid themes using SCSS when loading them?

    I have attempted to include the following code in my main.scss file: @import '~ag-grid-community/src/styles/ag-grid'; @import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham'; @import '~ag-grid-community/src/st ...

    csssassag-grid

    The Bootstrap Columns are refusing to budge to the right, opting to stack neatly beside each other instead

    While working on the coding for a website homepage, I ran into an issue trying to add another column. No matter what I tried, it wouldn't move to the right as intended. Even when attempting to justify it to the right, it still didn't work properl ...

    htmlbootstrap-5

    How can I prevent Chrome from constantly prompting for permission to access the camera?

    I have been working on some HTML/JavaScript/WebRTC projects that involve using the webcam. Despite hosting the files from my local web server (127.0.0.1), Chrome always prompts me for permission to access the camera each time I reload the page. Is there a ...

    javascripthtmlgoogle-chromecamerawebrtc

    Angular - applying the number pipe only when a value is present

    While developing my shop app, I encountered an issue with the number pipe. Is there a way to format numbers like 64.90 to display two digits after the decimal point only if there is a value in the database, such as 64.9, and if it's 60 in the database ...

    htmlangularfirebase

    What is the best way to align a form in the center of a page both horizontally and vertically

    Currently, this is the HTML code I am working with: <body> <form id="form_login"> <p> <input type="text" id="username" placeholder="username" /> </p> ...

    htmlcss

    What causes the Footer to appear as a floating element in Tailwind CSS?

    I've implemented the tailwind CSS footer into my NextJS project to display fetched data. However, I encountered an issue where the footer only floats when there is less data present. To address this problem, I created a separate footer file within my ...

    htmlcssreactjsnext.jstailwind-css

    Setting the position of the center to be relative inside a table cell

    I need help with centering a +/- animation within my table rows to create an accordion toggle effect for revealing more information. Despite finding a nice looking animation, I'm struggling to position it correctly within the td element in my code. He ...

    htmlcsscss-positionaccordion