使整个div成为文本对齐的链接？

Question

我有一个div，它使文本向右对齐（使用align-items：flex-end）。

因为链接文本仅在div的右侧开始，所以DIV的左侧不是链接。

我知道可以通过在DIV中添加“ OnClick”功能来解决此问题，但是我的问题是我还需要支持中间按钮单击。 （这将打开一个新的TAB）

使用CSS，即使文本向右对齐，我也可以使整个div成为链接吗？

 .list_text{ cursor:pointer; display:flex; border:2px solid black; align-items:flex-end; flex-direction:column; width:100%; } 

 <div class="list_text"> <a href="http://www.stackoverflow.com" target="_blank">If I click left to this text, can this still be a link?</a> </div> 

Answer 1

只需添加list_text阶级a标签。 检查下面的更新的片段。

 .list_text { display:flex; border:2px solid black; align-items:flex-end; flex-direction:column; width:100%; } 

 <div><a href="http://www.stackoverflow.com" target="_blank" class="list_text">If I click left to this text, can this still be a link?</a></div> 

Answer 2

将链接设置为100％宽，并将文本向右对齐。

 .list_text { cursor: pointer; display: flex; border: 2px solid black; align-items: flex-end; flex-direction: column; width: 100%; } .list_text a { text-align: right; width: 100%; } .list_text a:hover { /* for demo */ background: lightblue } 

 <div class="list_text"><a href="http://www.stackoverflow.com" target="_blank">If I click left to this text, can this still be a link?</a></div> 

Answer 3

删除容器div并将类.list_text添加到锚标记中。 检查代码以供参考。

 .list_text { cursor: pointer; display: flex; border: 2px solid black; align-items: flex-end; flex-direction: column; width: 100%; } 

 <a href="http://www.stackoverflow.com" class="list_text" target="_blank">If I click left to this text, can this still be a link?</a> 

希望对您有所帮助。