包围在li元素周围的锚标签 [英] wrap anchor tag around li element

问题描述

我正在创建导航菜单。我想使用CSS，使锚标签包裹在li元素周围，但锚标签在li元素内。

这里是html

 < ul> 
< li>< a href => Uutiset< / a>< / li> 
< li>< a href => Foorumi< / a>< / li> 
< li>< a href => Kauppa< / a>< / li> 
< li>< a href => Messut< / a>< / li> 
< li>< a href => Asiakaspalvelu< / a>< / li> 
< li>< a href => Nakoislehti< / a>< / li> 
< li>< a href => Nae meidat< / a>< / li> 
< / ul> 
  

这里是我的少css

  ul {
 list-style-type：none; 
 padding：0; 
 margin：0; 
 li {
 padding：2％4％; 
 border：1px solid green; 
 a {
 text-decoration：none; 
 display：block; 
} 
} 
} 
  

解决方案>

< ul> 中允许的唯一法律元素是< li> 。您不能在< li> 上包含锚点。这在HTML5中是成立的，其中锚点可以包围其他块级别的元素。

你在CSS中几乎有，只需添加：

  a {
 text-decoration：none; 
 display：block; 
 width：100％; 
 height：100％; 
} 
  

您的锚将填充 < li> 。

I am creating navigation menu. I want to use css so that anchor tag is wrapped around li element but anchor tags are inside li element.

Here is html

<ul>
    <li><a href="">Uutiset</a></li>
    <li><a href="">Foorumi</a></li>
    <li><a href="">Kauppa</a></li>
    <li><a href="">Messut</a></li>
    <li><a href="">Asiakaspalvelu</a></li>
    <li><a href="">Nakoislehti</a></li>
    <li><a href="">Nae meidat</a></li>
</ul>

here is my less css

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  li {
    padding: 2% 4%;
    border: 1px solid green;
    a {
        text-decoration: none;
        display: block;
    }
  }
}

解决方案

The only legal element allowed inside a <ul> is an <li>. You cannot have an anchor wrapped around the <li>. This holds true in HTML5, where an anchor can wrap around other block level elements.

What you have in CSS is nearly there, just add:

a {
     text-decoration: none;
     display: block;
     width: 100%;
     height: 100%;
}

And your anchor shall fill the entire space of the <li>.

这篇关于包围在li元素周围的锚标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！