html - 如何像附图一样塑造导航菜单中的事件列表？

Question

我有这个 html 代码:

<ul class="nav">                    
   <li id="home" class="active""><a href="/">Home</a></li>        
   <li id=""><a href=""></li>
</ul>

我想将“事件”类塑造为附加图像中的事件类。

the desired shape

我试过:

.active{
  border-radius:60%;
  padding:0 10px;
}

还有更多其他 css 属性，但我无法获取。

Answer 1

您可以将 css 样式应用到您的 a 链接元素，将其设置为显示 block 级元素，并将您的 border-radius 设置为固定像素。

ul li {
   display: inline-block;
}
.active a{
          display: block;
          border-radius:15px;
          padding: 10px;
          background: #ccc;
}
.active a:hover{
          background: #ff0000;
}

   <ul class="nav">                    
         <li id=""><a href="">Link 01</a></li>
         <li id=""><a href="">Link 02</a></li>
         <li id=""><a href="">Link 03</a></li>
      <li id="home" class="active"><a href="/">Home</a></li>        
    </ul>