追加按鈕

我想追加一個「刪除」按鈕懸停的ul項。它似乎工作，但我似乎無法讓按鈕對齊到屏幕的右側。每次我嘗試時，似乎都往右下一行。追加按鈕

以下是完整的腳本：

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

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

編輯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，因爲這將導致問題。我的第一個想法是，你有 s發送的display：block。請注意，您可能希望在錨點之間包含空格 – lnrbob 2010-12-15 11:37:39

此頁面暫時沒有css。上面的腳本是一切，我正在測試IE8。 – oshirowanen 2010-12-15 11:38:48

它適用於我：http://www.jsfiddle.net/txqhB/你可能有額外的CSS。（我在Chrome和IE7上測試過它） – Shikiryu 2010-12-15 11:49:51

我相信你是在兼容模式下爲IE8顯示正確。按照巴蒂斯特Pernet女士的方法，但你的CSS應該是：

li a {float:left} 

li a.button { float: right;}

這將阻止IE7和IE8 compat的下降刪除按鈕到另一條線路，但你需要做的包含浮在本example

來源

2010-12-15 12:06:21 lnrbob

奇怪的是，我添加了並且它已經開始工作。爲什麼IE8會默認IE7的兼容模式？如果我添加該按鈕向下一行。但與它工作，因爲我希望它的工作。 – oshirowanen 2010-12-15 12:16:17

沒關係，想通了，我出於某種原因有內部網站設置爲IE7模式... – oshirowanen 2010-12-15 12:30:10

IE瀏覽器有奇怪的想法 - 轉到'頁面 - >兼容性視圖設置'，並禁用選項。可能是你在你的Intranet區域，默認情況下它被強制進入兼容性！此外，你可能想包括修復以防萬一;） – lnrbob 2010-12-15 12:30:23

您的代碼工作正常，我在Chrome中， FF和IE8。你的瀏覽器是什麼？

編輯：試試這個：

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

在 <head>

，並改變腳本：

<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

是的，上面的腳本是這樣工作的，但我想知道如何讓（刪除）按鈕對齊屏幕的右側，與物品懸停在同一行上，或者可以浮動到右側屏幕。每次嘗試時，它都會下降一行。我正在使用IE8。 – oshirowanen 2010-12-15 11:40:58

是的!!!!即使我試圖在所有瀏覽器中正常工作 – Vivek 2010-12-15 11:41:19

嘗試AA類添加到您的按鈕：

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

這個CSS：

li a.button { float: right;}

與該工作示例：http://jsfiddle.net/GWUZg/

來源

2010-12-15 11:43:58

出於某種原因，這對我不起作用。我編輯了我的原始問題，以顯示腳本與您的css – oshirowanen 2010-12-15 11:50:38

它在您提供的鏈接工作，但它不工作時，我嘗試將相同的腳本添加到我的網頁。 – oshirowanen 2010-12-15 11:55:42

@oshirowanen：_doesn't work_不是一個很好的解釋自己的方法。你能更精確些嗎？ – Shikiryu 2010-12-15 12:05:29

試試這個...

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

和cs旨意是..

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

和更多信息請訪問這個鏈接
try this

來源

2010-12-15 11:47:01 Vivek

我剛剛試過這個，並且（刪除）根本不會從原始位置移動。 – oshirowanen 2010-12-15 11:57:46

回答

相關問題