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 に答える