Appending a button_问答_开发者_运维开发者技术经验分享

I am trying to append a "remove" button to ul items on hover. It seems to work, but I can't seem to get the button to align to the right of the screen. Each time I try, it seems to go to the right and down one line.

Here is the full script:

<!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开发者_Python百科://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>

try to add a a class to your button:

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

with this css :

li a.button { float: right;}

with this working example: http://jsfiddle.net/GWUZg/

I believe you are in compatibility mode as IE8 displays correctly. Follow Baptiste Pernet's method but your css should be:

li a {float:left}

li a.button { float: right;}

This will stop IE7 and IE8 compat dropping the remove button to another line but you will need to make the 's contain the floats as in this example

try this...

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

and css will be ..

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

and for more information try this link
try this

Your code works fine for me in Chrome, FF and IE8. What's your browser?

EDIT: Try this:

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

in <head> and change script to:

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

Works for me on all browsers. And if you want to align button to right of the screen just change li { width:130px; } to li { width:100%; }.