J'ai des éléments ul comme ci-dessous dans mon 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>

Maintenant, je veux utiliser un bouton juste en dessous de ul. Mais quand je mets quelque chose comme le code ci-dessous, ça casse.

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

Est-il donc possible de mettre mon bouton en tant qu'élément li afin d'obtenir exactement le même aspect (CSS).

Voici le violon pour le même. Le bouton doit ressembler à l'élément ul

3
Suraj 24 janv. 2017 à 09:59

6 réponses

Meilleure réponse

Voici le code, ajoutez simplement un bouton dans un élément "li" et supprimez la puce.

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

Rendre également list-style-type à aucun

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

Voici un violon à vérifier. J'espère que ça aide !! lien

3
Saroj 13 mai 2019 à 06:11

Tu peux essayer ça

<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>
0
shyamm 24 janv. 2017 à 07:04

Veuillez essayer ci-dessous l'extrait de 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>            

        <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();
});
0
Amol Udage 24 janv. 2017 à 07:43

Pouvez-vous vérifier avec ce 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>

Le résultat sera: entrez la description de l'image ici

0
Achu S 24 janv. 2017 à 07:31

<input> éléments sont vides (vous ne devez pas utiliser balises de fin). Je préfère utiliser des éléments <button>:

<button class="signout_btn" id="btnSignOut">Sign Out</button>
0
Web_Designer 24 janv. 2017 à 07:06

Avez-vous essayé width=100% et height=100% avec des paramètres définis pour la liste?

1
DreamTeK 24 janv. 2017 à 08:43