4

我在使用 jQuery 扩展一些列表元素时遇到了一些问题。这些列表是我想在鼠标悬停时展开的一系列社交媒体图标链接。问题是，当扩大li的宽度时，ul也扩大了，由于li中的图像是向左浮动的，它们看起来远离屏幕的右边缘。我设法让文本和图像很好地坐在一起的唯一方法是浮动图像。我的 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);
    });

    });

非常感谢您的帮助。

4

2 回答 2

1

这是为你做的

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

关键是clear: both在浮动元素时，确保它们清除任何可能在其行上的东西。

见演示：http: //jsfiddle.net/kcGZJ/17/

于 2012-10-26T23:55:32.620 回答
1

这是一个修复 - 它不是最漂亮的，但效果很好 - jsFiddle

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

    ul#social li {
     position:relative;;
    right: 0px;

    }

    ul#social li img {
position: relative;
    right:0px;
    }

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

使用绝对定位 - 必须在列表中放置换行符 - 有效

 <ul id="social">
  <li> <a href="#"><img src="images/iconFacebook.jpg" />Like me on Facebook</a></li><br /><br />
  <li><a href="#"><img src="images/iconTwitter.jpg" />Follow me on Twitter</a></li><br /><br />
  <li><a href="#"><img src="images/iconGoogle.jpg" />Add me to Google+</a></li><br /><br />
  <li><a href="#"><img src="images/iconBlog.jpg" />Check out my blog</a></li>
 </ul>​
于 2012-10-27T00:05:42.543 回答