Display list items centered with dynamic height

user_10099225 0
Viewed 464

So I am trying to make list items equal size and align inside content in the middle. All I get is a big mess. Also, another important thing I want the a tag link to work on the whole list element - so on the whole square. Right not the link only works if you press is on the a tag only. Is it possible to do it, without changing the HTML structure?

So the main things:

  1. The height of the <li> item can vary, because of the contents inside, but not the width and I am trying to make all of them the same height.
  2. Make the whole <li> area clickable, so it would redirect to the <a> tag reference page. Without changing the current structure.
  3. Center the content in <li> tag and don't overflow the container.
  4. In the example, the content inside the last <li> element, the text, and the <a> tag is in the same line. How could I properly make them in different lines?

In the example below, it is the typical structure I need to style.

.ul {
  display: flex;
}

.test1 {
  display: inline-flex;
  min-height: 100px;
  width: 100px;
  list-style: none;
  background-color: #9affda;
  color: black;
  margin: 0px 10px;
  border-radius: 10px;
  align-items: center;
  vertical-align: top;
}
<ul>
  <li class="test1"><a href="">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1">Test text </li>
  <li class="test1">Test text <a href="">TEST TEST TEST TEST TEST TEST TEST</a></li>
</ul>

I have tried multiple approaches but every time something would go wrong [look at the main things I am trying to do]. I tried display table and table-cell, flex and inline-flex, inline-block and all other kinds of things...

Goal output

Goal output

The blue squares are <li> elements. The <a> tag is called link inside and regular text is text inside.

flexbox html-lists css html
2 Answers

okay, the first thing is that in your css, you write ".ul" but you have not any class "class="ul""!

if you write in your css only "ul{}" it change everything.

then, if you want that your entire square will be a link, you need to change the order that you write your list!

it's : 

<ul>
    <a href="">
        <li> TEST </li>
    </a>
</ul>

and your css:

ul {
  display: flex;
}
user_122328970

You were most of the way there and we can achive most (but not all) of your requirements just by using flex-direction:column.

  1. The height of the <li> item can vary, because of the contents inside, but not the width and I am trying to make all of them the same height.

  2. Make the whole <li> area clickable, so it would redirect to the <a> tag reference page. Without changing the current structure.

NB - No.2: This is not possible with CSS unless the link is 100% width/height of the li. In this case there is a separate text node which means that the link is a not (and cannot be) that size. You would need Javascript.

  1. Center the content in <li> tag and don't overflow the container.

  2. In the example, the content inside the last <li> element, the text, and the <a> tag is in the same line. How could I properly make them in different lines?

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

.test1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 100px;
  width: 100px;
  list-style: none;
  background-color: #9affda;
  color: black;
  margin: 0px 10px;
  border-radius: 10px;
  overflow: hidden;
}

a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
}

a:hover {
  background: darkseagreen;
}
<ul>
  <li class="test1"><a href="">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1"><a href="">TEST TEST TEST</a></li>
  <li class="test1">Test text </li>
  <li class="test1">Test text <a href="">TEST TEST TEST TEST TEST TEST TEST</a></li>
</ul>

user_28020400
Related