在固定大小的里面定位链接文本

-3

如何定位与容器大小相同的a链接文本（因此整个容器都是可点击的）？什么是最好的方法？在固定大小的里面定位链接文本

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

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

2016-07-11 kulan

代码中的所有容器均可全部点击。 –

@MarcosPérezGude我需要将文本放在容器的底部。 – kulan

寻求代码帮助的问题必须包括在问题本身**中重现**所需的最短代码。虽然您提供了[**链接到示例或网站**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-如果链接变得无效，那么你的问题对于其他具有相同问题的未来SO用户将没有任何价值。 –

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

可能是你可以尝试做这个

来源

2016-07-11 10:06:58

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

你可以使用填充它

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

来源

2016-07-11 10:07:40 Maharkus

可点击区域将超出容器范围，这是不可接受的。 – kulan

父亲上溢出：隐藏然后 – Maharkus

这似乎是合法的。 – kulan

看到这里jsfiddle

使用table-cell和vertical-align:bottom

代码加入：

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

来源

2016-07-11 10:08:16

使用display:table和float：左to李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%; 
 
}

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

来源

2016-07-11 10:09:41 Ravimallya

'float' +'display：table' =错！ –

@MarcosPérezGude你能解释一下为什么？顺便说一句，请参阅[this]（http://stackoverflow.com/questions/14942781/in-css-why-does-the-combination-of-float-left-displaytable-margin-x-on-m） – Ravimallya

如果你不支持旧的ie浏览器，你可以使用display：弯曲和调整内容，如下面的例子。

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>

来源

2016-07-11 10:14:04 San

对不起，粘贴错误的答案，现在编辑它 – San

与Flexbox的A液：

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

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

来源

2016-07-11 10:19:37 blonfu

在固定大小的里面定位链接文本

回答

相关问题