列表内的CSS列表没有水平对齐？

Question

我正在制作一个横向菜单，四个部分应该彼此相邻，香肠卷，薯条，翅膀，菠菜风车和大蒜面包应垂直，但水平旁边的下一个列表。我检查了警报建议的每个问题与此问题类似或相同，但没有一个问题有帮助，也许我的HTML有问题？

<form method="post" action="menu.php">
  <ul>
    <li>
      <ul class="menus">
        <li>Sausage Rolls</li>
        <li>Fries</li>
        <li>Wings</li>
        <li>Spinach Pinwheels</li>
        <li>Garlci Bread</li>
      </ul>
    </li>
    <li>
      <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>
      <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>
      <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>

Answer 1

使用css flex-box属性，在这里我将display:flex添加到您的父级ul标签

它工作正常。

ul,li{
  list-style:none;
  padding : 0px;
 }
form>ul{
   display:flex;
  }

<form method="post" action="menu.php">
  <ul>
    <li>
      <ul class="menus">
        <li>Sausage Rolls</li>
        <li>Fries</li>
        <li>Wings</li>
        <li>Spinach Pinwheels</li>
        <li>Garlci Bread</li>
      </ul>
    </li>
    <li>
      <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>
      <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>
      <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>

Answer 2

不使用display: flex;的解决方案：

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

Answer 3

这是使用没有flex-box的另一种方式

在这里，我将display: table;添加到ul，或将display: table-cell;添加到li

它工作正常。

ul,li{
  list-style:none;
  padding : 0px;
 }
form>ul {
    display: table;
}
form>ul>li {
    display: table-cell;
}

  <form method="post" action="menu.php">
  <ul>
    <li>
      <ul class="menus">
        <li>Sausage Rolls</li>
        <li>Fries</li>
        <li>Wings</li>
        <li>Spinach Pinwheels</li>
        <li>Garlci Bread</li>
      </ul>
    </li>
    <li>
      <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>
      <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>
      <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>

Answer 4

没有display: flex，简化的html。

<html>
<head>
<title>Order</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<style type="text/css">
.menus
{
   float: left;
  padding-left: 1rem;
  
}
.btn-submit {
    clear:left;
}

</style>
</head>
<body>
<form method="post" action="menu.php">

<ul class="menus">
    <li>Sausage Rolls</li>
    <li>Fries</li>
    <li>Wings</li>
    <li>Spinach Pinwheels</li>
    <li>Garlci Bread</li>
</ul>
<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>
<ul class="menus">
    <li>Edible Cookie Dough</li>
    <li>Ice Cream Sandwich</li>
    <li>Cheesecake</li>
    <li>Chocolate Cake</li>
    <li>Brownies</li>
</ul>
<ul class="menus">
    <li>Wine</li>
    <li>Beer</li>
    <li>Water</li>
    <li>Juice</li>
    <li>Coffee</li>
</ul>
<div class="btn-submit"><input type="submit" name="order" value="Order"></div>
</form>
</body>

</html>