Question

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

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

我知道我可以通过添加＆＃34; OnClick＆＃34;来解决这个问题。功能到DIV，但我的问题是我需要支持中按钮点击。（这会打开一个新的TAB）

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

＆＃13;

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

＆＃13;

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

＆＃13;

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％宽并将文本右对齐。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

希望得到这个帮助。

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

3 个答案: