li元素充当html中的锚点

Question

我的html

中有如下代码

<ul class="nav">
 <li class="no-bullet " onclick="window.location = 'ask_question.html';">
   <button type="button" class="signout_btn line_height">
     <i class="fa fa-home " aria-hidden="true"></i>
          Home</button>
 </li>

 <li class="sub-menu"><a href="#">
     <i class="fa fa-tags" aria-hidden="true"></i>
            Search by Category</a>
        <ul class="" id="loadCategories">
          <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="#">
    <i class="fa fa-map-marker" aria-hidden="true"></i>
             Switch City </a>
       <ul class="" id="loadCities">
          <li><a href="#">Mumbai</a></li>
          <li><a href="#">Bangalore</a></li>
          <li><a href="#">Personal</a></li>
       </ul>
 </li> 

 <li class="no-bullet " onclick="window.location = 'user_profile.html';" >
   <button type="button" class="settings_btn line_height">
     <i class="fa fa-user" aria-hidden="true"></i> 
           My Profile</button>
 </li>

 <li class="no-bullet " onclick="window.location= 'all_users.html';">
   <button type="button" class="signout_btn line_height" id="btnFindAFriend">
     <i class="fa fa-users" aria-hidden="true"></i>
              Find A Friend</button>
 </li>
</ul>

如果你注意到上面的代码，我有li，点击后我会指向某个html页面。在li内，我在那里放了一个按钮，以使我的所有菜单选项看起来均匀。为了达到这个目的，我做了一些制作和打破，使它看起来完全相似。

但我无法让所有这些看起来完全一样。我希望所有菜单选项都具有相同的高度和大小。

有人可以推荐一种正确的解决方法。

这是同一个fiddle。