如何增加列表之间的水平空间？

Question

我正在尝试增加内联列表中的空间，以便它们不会并排放置。我已经尝试过字间距并在标题中添加填充链接，但这没有用。此外，我发现将列表顺序（商店，产品，常见问题，博客）内联和浮动的唯一方法是将列表向后排列。所以，当我

博客

faq

产品

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

如果您需要其他订单，为什么不这样写？

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

或者有些东西我没有得到

并且对于水平空间执行此操作

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

Answer 2

尝试以下更新的代码段

＆＃13;

＆＃13;

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

＆＃13;

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


    

＆＃13;

＆＃13;

＆＃13;