Question

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

此图片应该更好地解释它。

visual explanation http://i48.tinypic.com/2aj0rkj.jpg

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

这是我的代码：

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

浮动元素时，关键是clear: both，这可以确保它们清除行上的任何内容。

请参阅演示：http://jsfiddle.net/kcGZJ/17/

Answer 2

这是一个修复 - 它不是最漂亮的，但效果很好 - 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>

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

2 个答案: