Question

我正在尝试在悬停时向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>

Answer 1

尝试在按钮中添加一个类：

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

用这个css：

li a.button { float: right;}

使用此工作示例：http://jsfiddle.net/GWUZg/

Answer 2

我相信您处于兼容模式，因为IE8正确显示。按照Baptiste Pernet的方法，但你的css应该是：

li a {float:left}

li a.button { float: right;}

这将停止IE7和IE8 compat将删除按钮删除到另一行，但你需要让它包含浮点数，如同example

Answer 3

您的代码在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%; }。

Answer 4

试试这个......

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

和css将是..

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

有关更多信息，请尝试此链接
try this

添加一个按钮

4 个答案: