Ajout d'un bouton

J'essaie d'ajouter un bouton "supprimer" à ul éléments sur le vol stationnaire. Cela semble fonctionner, mais je n'arrive pas à aligner le bouton sur la droite de l'écran. Chaque fois que j'essaie, il semble aller à droite et en bas d'une ligne.Ajout d'un bouton

Voici le script complet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>remove button</title> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

     <script> 
      $(document).ready(function() { 
       $("li").hover(
        function() { 
         $(this).append($("<a href='#'>(remove)</a>")); 
        }, 
        function() { 
         $(this).find("a:last").remove(); 
        } 
       ); 
      }); 
     </script> 
    </head> 

    <body> 
     <ul id="mylist"> 
      <li id="item_4"><a href="http://www.google.com">google</a></li> 
      <li id="item_9"><a href="http://www.yahoo.com">yahoo</a></li> 
      <li id="item_2"><a href="http://www.bing.com">bing</a></li> 
      <li id="item_5"><a href="http://www.youtube.com">youtube</a></li> 
      <li id="item_8"><a href="http://www.ebay.com">ebay</a></li> 
     </ul> 
    </body> 
</html>

EDIT 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>remove button</title> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

     <style type="text/css"> 
      li a.button {float:right;} 

     </style> 


     <script> 
      $(document).ready(function() { 
       $("li").hover(
        function() { 
         $(this).append($(" <a href='#' class='button'>(remove)</a>")); 
        }, 
        function() { 
         $(this).find("a:last").remove(); 
        } 
       ); 
      }); 
     </script> 
    </head> 

    <body> 
     <ul id="mylist"> 
      <li id="item_4"><a href="http://www.google.com">google</a></li> 
      <li id="item_9"><a href="http://www.yahoo.com">yahoo</a></li> 
      <li id="item_2"><a href="http://www.bing.com">bing</a></li> 
      <li id="item_5"><a href="http://www.youtube.com">youtube</a></li> 
      <li id="item_8"><a href="http://www.ebay.com">ebay</a></li> 
     </ul> 
    </body> 
</html>

EDIT 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>remove button</title> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

     <style type="text/css"> 
      a.button {float:right;} 
     </style> 

     <script> 
      $(document).ready(function() { 
       $("li").hover(
        function() { 
         $(this).append($(" <a href='#' class='button'>(remove)</a>")); 
        }, 
        function() { 
         $(this).find("a:last").remove(); 
        } 
       ); 
      }); 
     </script> 
    </head> 

    <body> 
     <ul id="mylist"> 
      <li id="item_4"><a href="http://www.google.com">google</a></li> 
      <li id="item_9"><a href="http://www.yahoo.com">yahoo</a></li> 
      <li id="item_2"><a href="http://www.bing.com">bing</a></li> 
      <li id="item_5"><a href="http://www.youtube.com">youtube</a></li> 
      <li id="item_8"><a href="http://www.ebay.com">ebay</a></li> 
     </ul> 
    </body> 
</html>

Source

2010-12-15 oshirowanen

veuillez poster votre css car cela causera le problème. Ma première pensée est que vous avez affichage: bloc envoyé sur votre s. Notez que vous pouvez inclure un espace entre les ancres – lnrbob

Cette page n'a pas de css pour le moment. Le script ci-dessus est tout et je suis en train de tester IE8. – oshirowanen

Cela fonctionne pour moi: http://www.jsfiddle.net/txqhB/ vous pouvez avoir CSS supplémentaire. (Je l'ai testé sur chrome et IE7) – Shikiryu

Je crois que vous êtes en mode de compatibilité comme IE8 affiche correctement. Suivez la méthode de Baptiste Pernet mais votre code CSS devrait être:

li a {float:left} 

li a.button { float: right;}

Cela arrêtera IE7 et IE8 compat tomber sur le bouton Supprimer à une autre ligne, mais vous devrez faire les « s contiennent les flotteurs comme dans ce example

Source

2010-12-15 12:06:21 lnrbob

Étrange, j'ai ajouté et il a commencé à fonctionner. Pourquoi IE8 serait par défaut en mode de compatibilité de IE7? Si j'ajoute le bouton descend d'une ligne. mais avec cela fonctionne comme je le veux. – oshirowanen

Nevermind, pensé, j'ai pour une raison quelconque sites intranet mis en mode IE7 ... – oshirowanen

IE a des idées bizarres - allez à la page -> paramètres de vue de compatibilité »et désactiver les options. Peut-être que vous êtes dans votre zone intranet qui par défaut est contraint à la compatibilité !! Aussi, vous pouvez vouloir inclure la correction juste au cas;) – lnrbob

Votre code fonctionne bien pour moi dans Chrome, FF et IE8. Quel est votre navigateur?

EDIT: Essayez ceci:

<style> 
    li { width:130px;} 
</style>

dans <head> et script modification:

<script> 
     $(document).ready(function() { 
      $("li").hover(
       function() { 
        $(this).append($("<a href='#' style='float:right;'>(remove)</a>")); 
       }, 
       function() { 
        $(this).find("a:last").remove(); 
       } 
      ); 
     }); 
</script>

Works pour moi sur tous les navigateurs. Et si vous voulez aligner le bouton à droite de l'écran, changez li { width:130px; } en li { width:100%; }.

Source

2010-12-15 11:38:17 Episodex

Oui, le script ci-dessus fonctionne comme il est, mais je voudrais que le bouton (supprimer) s'aligne sur la droite de l'écran, sur la même ligne que l'objet survolé, ou flotte à droite de l'écran. Chaque fois que j'essaie, il tombe une ligne. J'utilise IE8. – oshirowanen

oui !!!! même j'ai essayé son fonctionnement bien dans tous les navigateur – Vivek

essayez d'ajouter aa classe à votre bouton:

$(this).append($("<a href='#' class='button'>(remove)</a>"));

cette css:

li a.button { float: right;}

avec cet exemple de travail: http://jsfiddle.net/GWUZg/

Source

2010-12-15 11:43:58

Pour une raison quelconque, cela ne fonctionne pas pour moi. J'ai édité ma question originale pour montrer le manuscrit avec votre css – oshirowanen

Cela fonctionne dans le lien que vous avez fourni, mais cela ne fonctionne pas quand j'essaye d'ajouter le même manuscrit à ma page Web. – oshirowanen

@oshirowanen: _n'est pas un travail_ n'est pas un bon moyen de vous expliquer. Pouvez-vous s'il vous plaît être plus précis? – Shikiryu

try this ...

<script> 
     $(document).ready(function() { 
      $("li").hover(
       function() { 
        $(this).append($("<a href='#' class='button'>(remove)</a>")); 
       }, 
       function() { 
        $(this).find("a:last").remove(); 
       } 
      ); 
     }); 
    </script>

et cs s sera ..

.button{position: relative; width: 760px; margin: 0 auto; text-align: right; }

et pour plus d'informations essayer ce lien
try this

Source

2010-12-15 11:47:01 Vivek

Je viens d'essayer ceci, et le (remove) ne bouge pas de son emplacement d'origine du tout. – oshirowanen

Répondre

Questions connexes