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
 }

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

Answer 2

您是否尝试使用列表的参数设置variable1.ToLower()和width=100%？

Answer 3

你可以试试这个

<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
  <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>

Answer 4

<input>个元素是empty（您不应该使用结束标记）。我更喜欢使用<button>元素：

<button class="signout_btn" id="btnSignOut">Sign Out</button>

Answer 5

请您查看此代码吗？

<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="sub-menu"><a href="#"></a>
                <button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
        </li>           
    </ul>

输出结果为：

Answer 6

请尝试下面的代码段..

OR()

CSS：

NOT()

}

JAVASCRIPT：

 <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>            

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

使用li元素作为按钮

6 个答案: