CODEWITHSUNDEEP
htmlcss
kurtko
kurtko

Reputation: 2126

<a> with same size of it's <li> parent with display: table-cell

I have a list with a some with one line, others with two lines. How I can force to have the same height and width as his li parent with display:table-cell and vertically align text?

ul {
  display:table;
  width:700px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  background-color:#ddd;
}

a {
  display:block;
  height:100%;      
  background-color:#aaa;
  padding:1em 1.2em;  
}

a:hover {
  background-color:red
}
<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Upvotes: 0

Views: 84

Answers (4)

user1987162
user1987162

Reputation:

height:100% will only work if all of the parents have a height set and one of them is not a percentage (unless all heights up to the body and html tags have percentage heights)

With this in mind, we can set height:100% on the li and then give the ul a height of 0 - as you have used display:table, tables will always grow to the height of their content

ul {
  display:table;
  width:700px;
  height:0;       /* add this */
  table-layout:fixed;
}

li {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  border-right:3px solid white;
  background-color:#ddd;
  height:100%;       /* add this */
}

a {
  display:block;
  height: 100%;      
  background-color:#aaa;
  padding:1em 1.2em;  
  box-sizing: border-box; /* add this to get rid of the big gap at the bottom */
}

a:hover {
  background-color:red
}
<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Update

Ok if you are only using tables for vertical alignment, then I would change this to flex - it gives you more control over child elements:

ul {
  list-style: none;
  display: flex;
  width: 700px;
}
li {
  display: flex;
  margin-right: 3px;
  background-color: #ddd;
  box-sizing: border-box;
  flex-grow: 1;
  flex-basis: 0;
}
a {
  display: flex;
  align-items: center;
  text-align: center;
  flex-grow: 1;
  background-color: #aaa;
  padding: 1em 1.2em;
  box-sizing: border-box;
}
a:hover {
  background-color: red
}
<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Upvotes: 4

Moises
Moises

Reputation: 1

First, you cannot set same height to those li > a without setting their CSS to white-space: nowrap; unless you put some fixed height:200px; in the CSS (not recommended)

You can try this.

li {
    display: table-cell;
    border-right: 3px solid white;
    text-align: center;
    vertical-align: center;
    background-color: #ddd;
    width: 10%;
}
a {
    display: block;
    background-color: #aaa;
    white-space: nowrap;
}

10% width is added in the li element to dynamically adjust the width depending on the parent size ul.

Upvotes: -3

Johannes
Johannes

Reputation: 67748

A very quick solution is to change the displaysetting on the ul to flex:

ul {
  display:flex;
  width:700px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  background-color:#ddd;
}

a {
  display:block;
  height:100%;      
  background-color:#aaa;
  padding:1em 1.2em 0 1.2em;  
}

a:hover {
  background-color:red
}
<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

(I also changed to bottom padding for a which was too much)

Upvotes: 0

sideroxylon
sideroxylon

Reputation: 4416

You can apply the padding and background color to the parent <li> elements, like this:

ul {
  display:table;
  width:500px;
}

li {
  display:table-cell;
  border-right:3px solid white;
  text-align:center;
  vertical-align:center;
  padding:1em 1.2em; 
  background-color:#aaa;
}

a {
  display:table-cell;
  height:100%; 
  vertical-align:middle;
}

a:hover {
  background-color:red
}
<ul>
  <li><a href="">Example 1</a></li>
  <li><a href="">Example 2 two lines</a></li>
  <li><a href="">Example 3</a></li>
  <li><a href="">Example 4 two lines</a></li>
  <li><a href="">Example 5</a></li>
  <li><a href="">Example 6</a></li>
  <li><a href="">Example 7</a></li>
</ul>

Upvotes: 0

Related Questions