html - 使用 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)。

这是fiddle对于相同的。该按钮应该看起来像 ul元素

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
 }

这是一个 fiddle 检查出来。希望它有帮助!! link