使用 li 元素作为按钮

Question

我的 html 中有如下所示的 ul 元素

<ul class="nav" id="loadCategories">
  <li class="sub-menu"><a href="#">Search by category</a>
    <ul class="">
      <li><a href="#">Food</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Personal</a></li>
    </ul>
  </li>

  <li class="sub-menu"><a href="#">Search by city</a>
     <ul class="">
       <li><a href="#">Mumbai</a></li>
       <li><a href="#">Bangalore</a></li>
       <li><a href="#">Personal</a></li>
     </ul>
    </li>

</ul>

现在我想使用这个 ul 下面的按钮。但是当我把类似代码的东西放在下面时，它就会崩溃。

  <input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>

那么有什么方法可以将我的按钮作为 li 元素以获得完全相同的外观 (CSS)。

这是相同的 小提琴。该按钮应类似于 ul 元素

原文由 Suraj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这里的代码只是在“li”元素中添加一个按钮并删除项目符号。

 <ul class="nav" id="loadCategories">
   <li class="sub-menu">
      <a href="#">Search by category</a>
      <ul class="">
          <li><a href="#">Food</a></li>
          <li><a href="#">Sports</a></li>
          <li><a href="#">Personal</a></li>
     </ul>
   </li>
   <li class="sub-menu">
         <a href="#">Search by city</a>
         <ul class="">
             <li><a href="#">Mumbai</a></li>
             <li><a href="#">Bangalore</a></li>
             <li><a href="#">Personal</a></li>
         </ul>
    </li>
   <li class="no-bullet">
       <button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
   </li>
</ul>

同时将 list-style-type 设为无

.no-bullet{
   list-style-type: none
 }

这是一个小提琴检查出来。希望它有帮助！ 关联

原文由 Saroj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您是否尝试 width=100% 和 height=100% 为列表设置参数？

原文由 jinnoflife 发布，翻译遵循 CC BY-SA 3.0 许可协议