问列表中的CSS列表没有水平对齐吗？

EN

<style>
  li.lists {
    float: left;
  }
  
  form ul.clearfix::after {
    clear: both;
    content: '';
    display: block;
  }
</style>

<form method="post" action="menu.php">
  <ul class="clearfix">
    <li class="lists">
      <ul class="menus">
        <li>Sausage Rolls</li>
        <li>Fries</li>
        <li>Wings</li>
        <li>Spinach Pinwheels</li>
        <li>Garlci Bread</li>
      </ul>
    </li>
    <li class="lists">
      <ul class="menus">
        <li>Instant Pot Chicken</li>
        <li>Salmon Pattles</li>
        <li>Callco Cabbage</li>
        <li>Bacon Wrappend Jalapeno</li>
        <li>Potato Mash</li>
      </ul>
    </li>
    <li class="lists">
      <ul class="menus">
        <li>Edible Cookie Dough</li>
        <li>Ice Cream Sandwich</li>
        <li>Cheesecake</li>
        <li>Chocolate Cake</li>
        <li>Brownies</li>
      </ul>
    </li>
    <li class="lists">
      <ul class="menus">
        <li>Wine</li>
        <li>Beer</li>
        <li>Water</li>
        <li>Juice</li>
        <li>Coffee</li>
      </ul>
    </li>
  </ul>
  <input type="submit" name="order" value="Order">
</form>