CODEWITHSUNDEEP
htmlcss
a1anm
a1anm

Reputation: 1629

Horizontally Align ULs In Different

I have the below code which displays list items horizontally.

However, the horizontal alignment gets broken up between the ULs. Is it possible to have all of the list items aligned across the ULs? ie so that item 6 appears below item 2 etc.

div,
ul,
li {
  margin: 0;
  padding: 0;
}

li {
  width: 24%;
  display: inline-block;
  border: 1px solid red;
  margin-bottom: 20px;
}

ul {
  width: 100%;
  display: inline-block;
}

.container {
  width: 1400px;
}
<div class="container">

  <div class="firstdiv">
    <ul class="firstul">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>

  <div class="seconddiv">
    <ul class="secondul">
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
    </ul>
  </div>

  <div class="thirddiv">
    <ul class="thirdul">
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
    </ul>
  </div>

</div>

Upvotes: 1

Views: 125

Answers (2)

canon
canon

Reputation: 41665

A future alternative may be to apply display:grid to your container and display: contents to its descendant <div> and <ul> elements. Granted, the support for display: contents is limited at the moment.

.container {
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 7.5px));
  grid-gap: 20px 10px;
}

.container div,
.container ul {
  display: contents;
}

.container li {
  list-style: none;
  outline: 1px solid #f00;
}
<div class="container">
  <div class="firstdiv">
    <ul class="firstul">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div class="seconddiv">
    <ul class="secondul">
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
    </ul>
  </div>
  <div class="thirddiv">
    <ul class="thirdul">
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
    </ul>
  </div>
</div>

Upvotes: 0

canon
canon

Reputation: 41665

Assumming that you need to keep your HTML structure like that, apply display: inline to your lists and their div wrappers:

div,
ul,
li {
  margin: 0;
  padding: 0;
}
li {
  width: 24%;
  display: inline-block;
  border: 1px solid red;
  margin-bottom: 20px;
}
.container div,
.container ul {
  display: inline;
}
<div class="container">
  <div class="firstdiv">
    <ul class="firstul">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div class="seconddiv">
    <ul class="secondul">
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
    </ul>
  </div>
  <div class="thirddiv">
    <ul class="thirdul">
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
    </ul>
  </div>
</div>

Upvotes: 3

Related Questions