Question

如何在a中定位与其容器大小相同的链接文本（以便整个容器可点击）？什么是最好的方式？

编辑：我需要将文本放在容器的底部。

这是我的代码。 https://jsfiddle.net/6mnmf7z9/3/

Answer 1

<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;
}

可能你可以试试这个

Answer 2

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

你可以使用填充

a {
  display:inline-block;
  width:100%;
  height:100%;
  text-align:center;
  padding-top: 70px;
}

Answer 3

使用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>

修改

如果要将文本水平居中，请将justify-content:center;添加到链接类

Answer 4

点击此处 jsfiddle

使用table-cell和vertical-align:bottom

已添加代码：

ul li {
  display:table; 
  float:left;
   ..... 
}
a {
    display:table-cell;
    vertical-align:bottom;
    .....
}

Answer 5

使用display:table并浮动：左to li as well as 'display:table-cell和vertical-align:bottom到标记。

代码：

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

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

Answer 6

如果您不支持旧的IE浏览器，可以使用display：flex和align content，如下例所示。

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>

将链接文本定位在固定大小的li中

6 个答案: