CODEWITHSUNDEEP
htmlcssflexboxhtml-lists
The Codesee
The Codesee

Reputation: 3783

How can I display two lists with each li element vertically under each other?

I have two separate lists (however I'm open for an example on how to just have one). The first list is information (such as 'title', 'length' 'release date') and the second list is the answers to the information (such as '50 Shades of Grey', '50 minutes' and '2015').

Here is my desired output and as you can see, the answers to the information is vertically centered under the information:

enter image description here

(Note there could be more information such as members of the cast, the budget e.g)

I have tried using Flex however the two lists are displayed separately on top of each other:

ul {
   white-space:nowrap; 
}

li {
   display: flex;
   justify-content: center;
   flex-direction: column;
   text-align: center;
}
<ul>
<li>Title</li>
<li>Length</li>
<li>Release Date</li>
</ul>
<ul>
<li>50 Shades of Grey</li>
<li>50 minutes</li>
<li>2015</li>
</ul>

Upvotes: 2

Views: 2194

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371123

Here's one method, using a single ul and flexbox:

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  flex: 1;
  text-align: center;
}

h2, p {
  white-space: nowrap; /* optional */
}
<ul>
  <li>
    <h2>Title</h2>
    <p>50 Shades of Grey</p>
    <p>another title</p>
    <p>another title</p>
    <p>another title</p>
  </li>
  <li>
    <h2>Length</h2>
    <p>50 minutes</p>
    <p>another length</p>
    <p>another length</p>
    <p>another length</p>
  </li>
  <li>
    <h2>Release Date</h2>
    <p>2015</p>
    <p>another year</p>
    <p>another year</p>
    <p>another year</p>
  </li>
</ul>

If you want to go hard-core semantic, you could nest the content of each li in another list, since they are also lists.

Upvotes: 2

Asons
Asons

Reputation: 87191

Assuming you want each line to align even if content in one of the items would be higher, you need to have one (in this case) ul and then size the items so they wrap per, in this case, every 3.

To also make sure each item has the same width, I use flex-basis.

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;       /*  create space between columns  */
  list-style: none;
  padding: 0;
}

li:nth-child(-n+3) {                    /*  first 3 items  */
  font-size: 24px;
  font-weight: bold;
}

li {
  flex-basis: calc(33.333% - 10px);     /*  1/3 minus 10px for a gutter  */
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  text-align: flex-start;
}
<ul>
  <li>Title</li>
  <li>Length</li>
  <li>Release Date</li>

  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>

  <li>50 Shades of Black, and a longer text so it breaks line</li>
  <li>50 minutes</li>
  <li>2015</li>

  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>

</ul>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can use CSS table-layout for this. You have to set display: table-row on ul and display: table-cell on li. Also you should add text-align: center on li.

ul {
  display: table-row;
}

li {
  display: table-cell;
  text-align: center;
  padding: 10px 20px;
}
<ul>
  <li>Title</li>
  <li>Length</li>
  <li>Release Date</li>
</ul>
<ul>
  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>
</ul>

You can also use Flexbox for this you just have to set flex: 1 on each li. This will work if you have equal number of li's in each ul, if not use table-layout.

ul {
  display: flex;
  list-style: none;
}

li {
  flex: 1;
  text-align: center;
}
<ul>
  <li>Title</li>
  <li>Length</li>
  <li>Release Date</li>
</ul>
<ul>
  <li>50 Shades of Grey</li>
  <li>50 minutes</li>
  <li>2015</li>
</ul>

Upvotes: 2

Related Questions