Html 使链接与父链接的高度相同

看来,

a {
    display: block;
    height: 100%
}

不使链接与父链接大小相同（在本例中为

li

）

blockquote，
h1，
h2，
h3，
h4，
h5，
h6，
html，
p{
颜色：#333333；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
边际：0px；
}
h1，
h2，
h3，
h4，
h5，
h6{
字号：500
}
.导航{
背景色：#FF8F2E；
高度：70像素；
边际上限：0px；
}
.导航栏导航{
文本对齐：右对齐；
位置：相对位置；
身高：100%；
}
.导航栏导航>ul{
列表样式类型：无；
保证金：0；
填充：0；
高度：70像素；
显示：块；
}
.导航栏导航>ul>li{
显示：内联块；
线高：70px；
身高：100%；
左侧填充：20px；
右边填充：20px；
}
.navbar导航>ul>li:悬停{
背景色：#F27000；
}
.导航栏导航>ul>li>a{
颜色：继承；
文字装饰：无；
指针事件：无；
}
.品牌{
左边距：20px；
颜色：#fff；
显示：块；
位置：绝对位置；
}
.品牌>h2{
显示：内联块；
线高：70px；
}
.品牌反向{
颜色：#333333；
}

标题








100%
的概念是它将接受父级的值

因此，您有一个
.link
元素，其高度为其父元素的100%
现在父项是一个
li
标记，其高度再次为
100%

因此，
.link
不知道该取什么高度，因为它试图取的值是
100%
，而不是实际的像素值

因此，至少必须在
ul
中设置高度属性，以便将其执行到
li
标记，然后将其执行到
.link
元素


编辑1:更新小提琴链接后，要使
a
标记与其
li
具有相同高度，唯一需要做的更改是添加
display:block
同时删除
指针事件：无使锚定标记可单击

.navbar-nav > ul > li > a {
  color: inherit;
  text-decoration: none;
  /* pointer-events: none; */        /* remove this to make it clickable*/
  display:block;               /* add this */
}

100%
的概念是它将接受父级的值

因此，您有一个
.link
元素，其高度为其父元素的100%
现在父项是一个
li
标记，其高度再次为
100%

因此，
.link
不知道该取什么高度，因为它试图取的值是
100%
，而不是实际的像素值

因此，至少必须在
ul
中设置高度属性，以便将其执行到
li
标记，然后将其执行到
.link
元素


编辑1:更新小提琴链接后，要使
a
标记与其
li
具有相同高度，唯一需要做的更改是添加
display:block
同时删除
指针事件：无使锚定标记可单击

.navbar-nav > ul > li > a {
  color: inherit;
  text-decoration: none;
  /* pointer-events: none; */        /* remove this to make it clickable*/
  display:block;               /* add this */
}

您只需将
.navbar nav>ul>li>a
设置为
display:block
。您还需要为锚元素的
href
定义一个值，并删除
指针事件：无
，以便链接正常工作

演示


blockquote，
h1，
h2，
h3，
h4，
h5，
h6，
html，
p{
颜色：#333333；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
边际：0px；
}
h1，
h2，
h3，
h4，
h5，
h6{
字号：500
}
.导航{
背景色：#FF8F2E；
高度：70像素；
边际上限：0px；
}
.导航栏导航{
文本对齐：右对齐；
位置：相对位置；
身高：100%；
}
.导航栏导航>ul{
列表样式类型：无；
保证金：0；
填充：0；
高度：70像素；
显示：块；
}
.导航栏导航>ul>li{
显示：内联块；
线高：70px；
身高：100%；
左侧填充：20px；
右边填充：20px；
}
.navbar导航>ul>li:悬停{
背景色：#F27000；
}
.导航栏导航>ul>li>a{
颜色：继承；
文字装饰：无；
显示：块；
}
.品牌{
左边距：20px；
颜色：#fff；
显示：块；
位置：绝对位置；
}
.品牌>h2{
显示：内联块；
线高：70px；
}
.品牌反向{
颜色：#333333；
}

标题








您只需将
.navbar nav>ul>li>a
设置为
display:block
。您还需要为锚元素的
href
定义一个值，并删除
指针事件：无
，以便链接正常工作

演示


blockquote，
h1，
h2，
h3，
h4，
h5，
h6，
html，
p{
颜色：#333333；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
边际：0px；
}
h1，
h2，
h3，
h4，
h5，
h6{
字号：500
}
.导航{
背景色：#FF8F2E；
高度：70像素；
边际上限：0px；
}
.导航栏导航{
文本对齐：右对齐；
位置：相对位置；
身高：100%；
}
.导航栏导航>ul{
列表样式类型：无；
保证金：0；
填充：0；
高度：70像素；
显示：块；
}
.导航栏导航>ul>li{
显示：内联块；
线高：70px；
身高：100%；
左侧填充：20px；
右边填充：20px；
}
.navbar导航>ul>li:悬停{
背景色：#F27000；
}
.导航栏导航>ul>li>a{
颜色：继承；
文字装饰：无；
显示：块；
}
.品牌{
左边距：20px；
颜色：#fff；
显示：块；
位置：绝对位置；
}
.品牌>h2{
显示：内联块；
线高：70px；
}
.品牌反向{
颜色：#333333；
}

标题








如果可能，请提供JSFIDLE。@Dhwani将JSFIDLE添加为请求EDIS
link
th