如何在a
中定位与其容器大小相同的链接文本(以便整个容器可点击)?什么是最好的方式?
编辑:我需要将文本放在容器的底部。
这是我的代码。 https://jsfiddle.net/6mnmf7z9/3/
答案 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-cell
和vertical-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-cell
和vertical-align:bottom
到标记。
代码:
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/
答案 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>