html - 如何增加列表之间的水平间距？

Question

我正在尝试增加内联列表的空间，以免它们并排卡住。我已经尝试过字间距并在标题链接中添加填充，但这没有用。此外，我发现让我的列表(商店、产品、常见问题解答、博客)内联并 float 在中心的唯一方法是将列表向后放置。所以当我做

blog

faq

products

shop

时，它会在订单中显示为 shop，产品，常见问题解答博客。我想知道是否有一种方法能够按顺序在 html 中编写它们，并且仍然让它们按顺序内联显示。任何帮助表示赞赏，谢谢!顺便说一句，我有

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

已经

#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> 


    

Answer 1

试试下面更新的代码片段

#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>