ボタンを追加する

私はホバー上の項目に "削除"ボタンを追加しようとしています。うまくいくようですが、ボタンを画面の右に揃えるように見えません。私が試してみるたびに、それは右に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> 

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

出典

2010-12-15 oshirowanen

のようにフロートを含めるようにする必要がありますこれが問題の原因になるので、あなたのCSSを投稿してください。私の最初の考えはdisplay：blockがあなたのに送られたことです。注意してくださいアンカーの間にスペースを含めることがあります – lnrbob

このページには現在CSSがありません。上のスクリプトはすべてで、私はIE8でテストしています。 – oshirowanen

それは私のために働く：http://www.jsfiddle.net/txqhB/追加のCSSがあるかもしれません。（私はクロムとIE7でそれをテストしました） – Shikiryu

をしようとします。バティストPernetの方法に従っていますが、CSSは次のようになります。

li a {float:left} 

li a.button { float: right;}

これは別の行に削除ボタンを落とすcompatのIE7とIE8を停止しますが、あなたは年代がこのexample

出典

2010-12-15 12:06:21 lnrbob

奇妙なことに、私はを追加して動作し始めました。なぜIE8はIE7の互換モードにデフォルト設定されますか？を追加すると、ボタンは1行下がります。しかし、のように動作します。 – oshirowanen

何故か、私は何らかの理由でイントラネットサイトがIE7モードに設定されていました... – oshirowanen

IEは「ページ - 互換性ビューの設定」に行き、オプションを無効にします。デフォルトでは互換性が強制されるイントラネットゾーンにいるかもしれません！ちょうどの場合に修正を含めることもできます;） – lnrbob

あなたのコードは、Chromeで私のために正常に動作し、 FFとIE8。あなたのブラウザは何ですか？

EDIT：このお試しください：に<head>と変更スクリプトで

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

を：

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

すべてのブラウザで私のために動作します。ボタンを画面の右に揃えたい場合は、li { width:130px; }をli { width:100%; }に変更してください。

出典

2010-12-15 11:38:17 Episodex

はい、上記のスクリプトはそのまま動作しますが、（削除）ボタンを画面の右側に配置する方法、マウスオーバーしたアイテムと同じ行にする方法、または右に浮かせる方法がありますスクリーン。試してみるたびに、1行下がります。私はIE8を使用しています。 – oshirowanen

はい!!!!でも私はすべてのブラウザでうまくいっています – Vivek

は、あなたのボタンにAAクラスを追加しよう：この実施例で

li a.button { float: right;}

：このCSSで

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

http://jsfiddle.net/GWUZg/

出典

2010-12-15 11:43:58

なんらかの理由でこれは私のためには機能しません。オリジナルの質問を編集して、あなたのCSS – oshirowanen

のスクリプトを表示しました。あなたが提供したリンクで動作しますが、私のウェブページに同じスクリプトを追加しようとすると動作しません。 – oshirowanen

@oshirowanen：_はうまくいきません_自分自身を説明する良い方法ではありません。もっと正確になりますか？ – Shikiryu

はこれを試して...

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

とcs sが可能..

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

とIE8が正しく表示されるよう詳細については、互換モードであなたが、私は信じている。このリンク
try this

出典

2010-12-15 11:47:01 Vivek

私はこれを試しましたが、（削除）は元の場所からまったく移動しません。 – oshirowanen

答えて

関連する問題