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

时间:2016-07-11 09:55:33

标签: css

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

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

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

6 个答案:

答案 0 :(得分: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;
}

可能你可以试试这个

答案 1 :(得分:1)

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

你可以使用填充

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

答案 2 :(得分:1)

使用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;添加到链接类

答案 3 :(得分:0)

点击此处 jsfiddle

使用table-cellvertical-align:bottom

已添加代码:

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

答案 4 :(得分:0)

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

代码:

&#13;
&#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;
&#13;
&#13;

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

答案 5 :(得分:0)

如果您不支持旧的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>