Question

I have a div element at the top of my webpage which contains a link (using an a tag). The div element spans the full width of the page, and I've managed to centre the a element in it horizontally. The issue is that the user can click anywhere inside the div to open the link, whereas I want to limit this "clickable area" to just the text in the a element.

#header_div {} #link_home {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 6.5em;
  font-weight: 900;
  margin: 0.05em;
  text-align: center;
  text-decoration: none;
}

<div id="header_div">
  <a id="link_home" href="index.html">HOME</a>
</div>

Answer 1

默认情况下，链接是内联的。这意味着您可以在父级上使用text-align属性，并使文本水平对齐left，right或center：

#header_div {
  /* note that all the font-* rules are inherited to children */
  font-family: 'Open Sans', sans-serif;
  font-size: 6.5em;
  font-weight: 900;
  text-align: center;
}
#link_home {
  text-decoration: none;
}

<div id="header_div">
  <a id="link_home" href="index.html">HOME</a>
</div>

Answer 2

我将text-align: center;从链接移动到div并将链接的显示设置为内嵌块或将其删除，使其默认为内联。

＆＃13;

 #link_home {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 6.5em;
  font-weight: 900;
  margin: 0.05em;
  text-decoration: none;
}
#header_div {
    text-align: center;
}

＆＃13;

<div id="header_div">
  <a id="link_home" href="index.html">HOME</a>
</div>

＆＃13;

如何将<a> element inside of a </a> <div> <a> element whilst limiting the clickable area of the </a> <a> element?

2 个答案: