<a> link 仅当您单击确切的文本时才起作用。如何使整个 <a> 标记可点击？
<a> link only functions if you click exact text. How do I make the entire <a> tag clickable?
我的网站有一个模式样式的弹出窗口 window 当用户单击此 link:
<li><a href="#contact"><label for="lightbox-demo">Contact</label></a></li>
问题是如果您直接在 "Contact" 文本上单击 ，此 link 只会打开弹出窗口 。如果您在 <a> 标签内单击，但错过了文本，则不会执行任何操作。如果单击 <a> 标记中的任意位置，弹出窗口将如何打开？
弹出代码（如果需要）是：
<aside class="lightbox">
<input type="checkbox" class="state" id="lightbox-demo" />
<article class="content">
<a href="#" class="closest"><img src="img/x.png" class="btn_close" title="Close Window" alt="Close Contact Window" /></a>
<form method="post" action="submit.php" id="contactform" class="signin">
<input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email" aria-required="true"/>
<div class="antispam">
<br /><input name="url" type="hidden" /></div>
<textarea name="message" id="message" class="feedback-input" placeholder="Comment" required minlength="15" required title="Must be at least 15 characters"></textarea>
<button id="flybutton">
<p>Submit </p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="paper-plane-icon" d="M4z"></path>
</svg>
</button>
</form>
</article>
<label class="backdrop" for="lightbox-demo"></label>
</aside>
感谢您的宝贵时间。
我看了你的代码，你需要在 <div> 标签周围放置 <a>。
<a href="#contact" class="loginbtn">
<div class="logrow">
<label for="lightbox-demo">Login</label>
</div>
</a>
不过，我认为只为登录按钮使用 <button> 标签会好得多。
您的代码应如下所示：
<div class="logrow">
<a href="#contact">
<button class="loginbtn">Login</button>
</a>
</div>
我认为问题可能是 CSS，尝试在元素“<a>”中插入属性 "display: inline-block"。
我认为您的问题在于放置锚标记的位置。由于它目前正在环绕 'text' 那么这正是焦点所在。
如果您改为将锚点环绕在列表元素周围，那么您应该能够单击列表元素本身。让我知道下面的示例是否让您更接近您想要的位置：
<ul>
<a href="http://www.google.com">
<li style="background-color: red;">
Google!
</li>
</a>
</ul>
如果您使用您在评论中提供的页面上的当前标记，那么此 CSS 将允许您扩展 link 的目标区域。
<style>
#nav > a{display: inline-block; padding: 10px;}
#nav > a > li > label{cursor: pointer;}
</style>
第一条规则使用padding来扩大link的可点击区域。第二条规则将标签中文本的指针从默认值更改为指针，以便它模仿 link。我会建议重组您的标记，但如果您保持原样，那么希望这会解决您的问题。
我的网站有一个模式样式的弹出窗口 window 当用户单击此 link:
<li><a href="#contact"><label for="lightbox-demo">Contact</label></a></li>
问题是如果您直接在 "Contact" 文本上单击 ，此 link 只会打开弹出窗口 。如果您在 <a> 标签内单击，但错过了文本，则不会执行任何操作。如果单击 <a> 标记中的任意位置，弹出窗口将如何打开？
弹出代码（如果需要）是：
<aside class="lightbox">
<input type="checkbox" class="state" id="lightbox-demo" />
<article class="content">
<a href="#" class="closest"><img src="img/x.png" class="btn_close" title="Close Window" alt="Close Contact Window" /></a>
<form method="post" action="submit.php" id="contactform" class="signin">
<input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email" aria-required="true"/>
<div class="antispam">
<br /><input name="url" type="hidden" /></div>
<textarea name="message" id="message" class="feedback-input" placeholder="Comment" required minlength="15" required title="Must be at least 15 characters"></textarea>
<button id="flybutton">
<p>Submit </p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="paper-plane-icon" d="M4z"></path>
</svg>
</button>
</form>
</article>
<label class="backdrop" for="lightbox-demo"></label>
</aside>
感谢您的宝贵时间。
我看了你的代码，你需要在 <div> 标签周围放置 <a>。
<a href="#contact" class="loginbtn">
<div class="logrow">
<label for="lightbox-demo">Login</label>
</div>
</a>
不过，我认为只为登录按钮使用 <button> 标签会好得多。
您的代码应如下所示：
<div class="logrow">
<a href="#contact">
<button class="loginbtn">Login</button>
</a>
</div>
我认为问题可能是 CSS，尝试在元素“<a>”中插入属性 "display: inline-block"。
我认为您的问题在于放置锚标记的位置。由于它目前正在环绕 'text' 那么这正是焦点所在。
如果您改为将锚点环绕在列表元素周围，那么您应该能够单击列表元素本身。让我知道下面的示例是否让您更接近您想要的位置：
<ul>
<a href="http://www.google.com">
<li style="background-color: red;">
Google!
</li>
</a>
</ul>
如果您使用您在评论中提供的页面上的当前标记，那么此 CSS 将允许您扩展 link 的目标区域。
<style>
#nav > a{display: inline-block; padding: 10px;}
#nav > a > li > label{cursor: pointer;}
</style>
第一条规则使用padding来扩大link的可点击区域。第二条规则将标签中文本的指针从默认值更改为指针，以便它模仿 link。我会建议重组您的标记，但如果您保持原样，那么希望这会解决您的问题。