use li element as a button

问题

I have ul elements like below in my html

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

Now I want to use a button just below this ul. But when I put something like the code below it breaks.

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

So is there any way I can put my button as a li element in order to get the exact same look(CSS).

Here's the fiddle for the same. The button should look like the ul element

回答1:

Here is the code just add a button in a "li" element and remove bullet.

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

Also make the list-style-type to none

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

Here is a fiddle check it out.Hope it helps!! link

回答2:

Did you try width=100% and height=100% with set parameters for the list?

回答3:

you can try this

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

回答4:

<input> elements are empty (you shouldn't use end tags). I prefer to use <button> elements:

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

回答5:

Could you please check with this code?

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

The output will be:

回答6:

Please try below code snippet..

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

CSS:

.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff;    display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;

}

JAVASCRIPT:

$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});

$( "li.sub-menu" ).click(function() {
  $(this).toggleClass('act');
  $(this).find('ul').slideToggle();
});

来源：https://stackoverflow.com/questions/41821877/use-li-element-as-a-button

标签

html

css

button

html-lists