jquery - 使用 jQuery 扩展位于页面右边缘的单个 <li> 元素？

Question

我在使用 jQuery 扩展某些列表元素时遇到了一些问题。这些列表是我想在鼠标悬停时展开的一系列社交媒体图标链接。问题在于，当扩展 li 的宽度时，ul 也会扩展，并且由于 li 中的图像向左浮动，因此它们看起来远离屏幕的右边缘。我设法让文本和图像很好地放在一起的唯一方法是 float 图像。我的 a 元素的宽度设置为 30px，jQuery 将宽度扩展到 200px。

这张图片应该能更好地解释它。

有什么方法可以单独扩展列表元素并使图像保持在屏幕的右边缘？

这是我的代码:

HTML

     <ul id="social">
      <li> <a href="#"><img src="images/iconFacebook.jpg" />Like me on Facebook</a></li>
      <li><a href="#"><img src="images/iconTwitter.jpg" />Follow me on Twitter</a></li>
      <li><a href="#"><img src="images/iconGoogle.jpg" />Add me to Google+</a></li>
      <li><a href="#"><img src="images/iconBlog.jpg" />Check out my blog</a></li>
     </ul>

CSS

    ul#social {
      display: block;
      list-style: none;
      position: absolute;
      right: 0px;
      top: 283px;
      z-index: 1600;
    }

    ul#social li {
      margin-top: 10px;
    }

    ul#social li img {
  float: left;
    }

    ul#social li a {
      display: block;
      height: 30px;
      width: 30px;
      line-height: 30px;
      vertical-align: middle;
      text-decoration: none;
      display: block;
      color: #FFFFFF;
      background: #f47920;
    }

jQuery

    $(document).ready(function(){

    $('ul#social li a').mouseover(function() {
      $(this).stop().animate({
        width: '200px'
        }, 300);
    });

    $('ul#social li a').mouseout(function() {
      $(this).stop().animate({
        width: '30px'
        }, 300);
    });

    });

非常感谢您的帮助。

Answer 1

这是为你做的

ul#social li {
    clear: both;
    float: right;
}

关键是在 float 元素时clear: both，这确保它们清除本应在其行上的任何内容。

查看演示:http://jsfiddle.net/kcGZJ/17/