CODEWITHSUNDEEP
htmlcss
user10788719
user10788719

Reputation:

CSS lists inside list not aligning horizontally?

I am making a horizontal menu, the four sections should be next to each other, the sausage rolls, fries, wings, spinach pinwheels, and garlic bread should ve vertical, but horizontally next to the next list. I checked every single question the alert suggested is similar or the same to this one but not a single one helps, maybe there's something wrong with my 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>

Upvotes: 1

Views: 85

Answers (4)

Shail_bee
Shail_bee

Reputation: 509

Without display: flex , simplified 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>

Upvotes: 0

jaydeep patel
jaydeep patel

Reputation: 917

Here are another way using without flex-box

Here i added display: table; into ul, or added display: table-cell; into li

And it's working fine.

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>

Upvotes: 0

user10825263
user10825263

Reputation:

Solution without using 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>

Upvotes: 0

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

use css flex-box property , here I added display:flex to your parent ul tag

and it's working fine.

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>

Upvotes: 4

Related Questions