Добавление кнопки

Я пытаюсь добавить кнопку «удалить» к элементам 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>

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, поскольку это вызовет проблему. Моя первая мысль состоит в том, что у вас есть отображение: блок отправлен на ваш с. Обратите внимание, что вы можете включить пробел между якорями – 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 отображается правильно. Следуйте методу Батиста Пернет, но ваш CSS должен быть:

li a {float:left} 

li a.button { float: right;}

Это остановит IE7 и IE8 Compat сбросив кнопку удаления на другую линию, но вам нужно будет сделать «s содержать поплавки, как в этом example

источник

2010-12-15 12:06:21 lnrbob

Ваш код отлично работает для меня в Chrome, FF и IE8. Какой у вас браузер?

EDIT: Попробуйте это:

<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

пытается добавить аа класса в кнопку:

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

с этим CSS:

li a.button { float: right;}

с этим рабочим примером: http://jsfiddle.net/GWUZg/

источник

2010-12-15 11:43:58

попробовать это ...

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

и для получения дополнительной информации попробуйте эту ссылку
try this

источник

2010-12-15 11:47:01 Vivek

Добавление кнопки

ответ

Смежные вопросы