-3

How do I position link text in a which have the same size as it's container (so the whole container is clickable)? What would be the best way?

EDIT: I need to put text at the bottom of a container.

Here's my code. https://jsfiddle.net/6mnmf7z9/3/

kulan
  • 1,353
  • 3
  • 15
  • 29
  • All containers in your code are whole clickable. – Marcos Pérez Gude Jul 11 '16 at 10:03
  • @MarcosPérezGude I need to put text at the bottom of a container. – kulan Jul 11 '16 at 10:05
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D Jul 11 '16 at 10:45

6 Answers6

1

https://jsfiddle.net/6mnmf7z9/10/

<a href=""><li>SIX</li></a>


ul li {
    display: inline-block;
    width: 120px;
    border: 1px solid;
    text-align: center;
    padding-top: 57px;
    padding-bottom: 1px;
}

May be you can try doing this

Pankaj Kumar
  • 871
  • 5
  • 12
1

https://jsfiddle.net/oLf7ff6b/1/

You could use padding for it

a {
  display:inline-block;
  width:100%;
  height:100%;
  text-align:center;
  padding-top: 70px;
}
Maharkus
  • 2,841
  • 21
  • 35
1

A solution with flexbox:

ul li {
  display:inline-block;
  width:120px;
  height:90px;
  margin-bottom:5px;
  border:1px solid;

}

a {
  background:green;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
}
<ul>
  <li><a href="">ONE</a></li>
  <li><a href="">TWO</a></li>
  <li><a href="">THREE</a></li>
  <li><a href="">FOUR</a></li>
  <li><a href="">FIVE</a></li>
  <li><a href="">SIX</a></li>
  <li><a href="">SEVEN</a></li>
  <li><a href="">EIGHT</a></li>
</ul>

EDIT

if you want to center the text horizontally add justify-content:center; to the link class

0

see here jsfiddle

use table-cell and vertical-align:bottom

code added :

ul li {
  display:table; 
  float:left;
   ..... 
}
a {
    display:table-cell;
    vertical-align:bottom;
    .....
}
Mihai T
  • 17,254
  • 2
  • 23
  • 32
0

use display:table and float:lefttolias well as 'display:table-cell and vertical-align:bottom to a tag.

code: 

ul li {
  width: 120px;
  height: 90px;
  margin-bottom: 5px;
  border: 1px solid;
  display: table;
  float: left;
}
a {
  background: green;
  display: table-cell;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
}
<ul>
  <li><a href="">ONE</a>
  </li>
  <li><a href="">TWO</a>
  </li>
  <li><a href="">THREE</a>
  </li>
  <li><a href="">FOUR</a>
  </li>
  <li><a href="">FIVE</a>
  </li>
  <li><a href="">SIX</a>
  </li>
  <li><a href="">SEVEN</a>
  </li>
  <li><a href="">EIGHT</a>
  </li>
</ul>

Jsfiddle: https://jsfiddle.net/6mnmf7z9/8/

Ravimallya
  • 6,550
  • 2
  • 41
  • 75
  • @MarcosPérezGude can you explain why? BTW, see [this](http://stackoverflow.com/questions/14942781/in-css-why-does-the-combination-of-float-left-displaytable-margin-x-on-m) – Ravimallya Jul 11 '16 at 10:12
0

If you are not supporting old IE browsers, you can use display: flex and align content like below example.

ul li {
 
  width:120px;
  height:90px;
  margin-bottom:5px;
  border:1px solid;
  display:table;
  float:left;
}


a {
  background:green;
  display:flex;
  align-items:flex-end;
  width:100%;
  height:100%;
}
<ul>
  <li><a href="">ONE</a></li>
  <li><a href="">TWO</a></li>
  <li><a href="">THREE</a></li>
  <li><a href="">FOUR</a></li>
  <li><a href="">FIVE</a></li>
  <li><a href="">SIX</a></li>
  <li><a href="">SEVEN</a></li>
  <li><a href="">EIGHT</a></li>
</ul>
San
  • 279
  • 1
  • 8