Question

我正在尝试创建一个列表，其中图像与文本内联，并且至少在我看到一个不寻常的问题。在四个链接的最后一个中，图像和文本都不在线，但是当我将鼠标悬停在它们上方时会跳入线条，并在我停止悬停在它们之后保持一致。

因此，当页面加载时，我的列表如下所示：

[图像]文本

[图像]

文本

但是当我将鼠标悬停在最后一个列表项上时，它会跳到这样的行：

[image] text

移动鼠标后，

保持这种状态。希望这个描述很清楚。

html：

            <div class= "social">
            <div class= "section follow">
            <h1>Join Me</h1>
            <ul>
            <li><a title="Tumblr" href="http://nickgardner.tumblr.com"><img alt="" src="images/tumblricon3.png">Tumblr</a>
            <li><a title="Twitter" href="http://twitter.com/#!/nerdkudzu"><img alt="" src="images/twittericon3.png">Twitter</a>
            <li><a title="Rdio" href="http://www.rdio.com/#/people/nngardner/"><img alt="" src="images/rdioicon3.png">Rdio</a>
            <li><a title="Dribbble" href="http://dribbble.com/nickgardner"><img alt="" src="images/dribbbleicon3.png">Dribbble</a>
            </ul>
            </div>
        </div>

和css：

.social {
  background: none; 
  float: left;
  /**width: 9.9%; /* 100/1010 */
  margin: 15px 0 15px -29px;
  color: #606060;

  }

.social .section {
  margin-bottom: 1.5em;
  float: right;
  }

.social li,
.social h1 { 
  font-size: .9em;
  text-transform: capitalize;

  }

.social h1 {
  margin-left: 30px;
  margin-bottom: 0;
  text-transform: uppercase;
  font: bold .6875em "museo-slab", serif;
  color: #606060;


  }

.social li {
  margin: 0;
  padding: 0;
  color: #695C44;
  list-style-type: none;
    }  

.social a {
  padding: .4em 0;

  }

.social .follow a img {
  float: left;
  width: 24px;
  margin: -5px 3px 0 0;
  opacity: .8;
  -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

.social .follow a:hover img {
  opacity: .5;
    }

.social .follow li a {
  padding: .5em 0 .5em 0;
  font-family: "museo-slab", serif;
  font-weight: normal;
  font-style: italic;
  color: #695C44;
  font-size: .8.5em;
  text-shadow: 0 2px 0 rgba(255,255,255,.5);
  display: block;
  }

.social a:hover {
  opacity: .8;
}

感谢您的阅读，并感谢您的回复缺口

Answer 1

这是解决此类问题的专有方法

^Lill[color=blue] ($xp,$zp) circle (5pt);

列表项目不合适，在悬停时跳入线（在safari中）

1 个答案: