如何使导航栏中列表项的整个区域可作为链接单击? [英] How do I make the whole area of a list item in my navigation bar, clickable as a link?

问题描述

我有一个由无序列表组成的水平导航栏，每个列表项都有很多填充以使其看起来不错，但唯一可用作链接的区域是文本本身.如何让用户点击列表项中的任意位置来激活链接?

#nav {背景颜色:#181818；边距:0px；溢出:隐藏；}#nav img {向左飘浮;填充:5px 10px；边距顶部:自动；底边距:自动；垂直对齐:底部；}#nav ul {列表样式类型:无；边距:0px；背景颜色:#181818；向左飘浮;}#导航李{显示:块；向左飘浮;填充:25px 10px；}#nav li:悬停{背景颜色:#785442；}#导航{白颜色;字体系列:Helvetica、Arial、sans-serif；文字装饰:无；}

<img src="/images/renderedicon.png" alt="图标" height="57" width="57"/><ul><li><a href="#">One1</a></li><li><a href="#">两个</a></li><li><a href="#">三</a></li><li><a href="#">四</a></li>
<div><h2>标题</h2>

解决方案

不要在 'li' 项中放置填充.而是将锚标记设置为 display:inline-block; 并对其应用填充.

I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

解决方案

Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.

这篇关于如何使导航栏中列表项的整个区域可作为链接单击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！