2

当我将鼠标悬停在此处的列表项上时，如何防止晃动？到目前为止，我已经尝试了不同的边距和填充。我还检查了哪个 css 元素溢出，但找不到任何结果。

我的CSS在这里：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background:#000000;
    color:#fff;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}


.temizle{clear:both;}

#containerANA{
    width:1100px;
    height:auto;
    margin: 0 auto;
    font:10px arial, helvetica, Geneva, sans-serif;

}


#content{
    width:100%;
    margin-top:0px;
}


#content p{
  position: relative;
  margin-left:auto;
  margin-right:auto;
  top:0px;
  display: block;
  padding: 5px;    
  color: #769B4E;
  font-size:18px;
  font-family: arial, helvetica, Geneva, sans-serif;
  text-align:justify;   
  border: 0px solid #769B4E;
  margin-top: 10px;
  margin-bottom: 10px;
}

#content p a{
    color:#ccc;
    text-decoration:none;
}

#content p a:hover{
    background:#e5da5f;
    color:#000;
}



.ikinciSol{
    width:550px;
    height:auto;
    float:left;
    margin-right:0px;
    font-family:Verdana, Geneva, sans-serif;
    text-align:left;
}

.ikinciSol h1{
    font-weight:bold;
    text-decoration:none;
    font-size:14px;
    font-family:Verdana, Geneva, sans-serif;
    color:#fb891a;
}

.ikinciSol ul
{
    list-style-type: none;

}

.ikinciSol #playlist li {
    margin-left:50px;
}

.ikinciSol ul li .singer{
    font-size:18px;
    display:inline;
}

.ikinciSol ul li .song{
    font-size:14px;
    display:inline;
}

.ikinciSol ul li a{
    text-decoration:none;
    color:#fff;
    margin-right:5px;

}

.ikinciSol ul li .singer a:hover{
    background:#e5da5f;
    color:#000;
}

.ikinciSol ul li  .song a:hover{
    background:#FF9966;
    color:#000;
}

.artist_track{
    margin-right:12px;

}
.fav{

}    



.ilgiliOge{
    width:402px;
    height:306px;
    font-size:24px;
    padding:0px;
}
4

4 回答 4

2

问题是当您悬停鼠标时，<li>由于共享按钮，高度会发生变化。为了防止这种情况发生，你应该给min-height列表项一个。最重要的是，如果您想让文本相对于您的按钮居中，您还应该对其进行line-height一些调整。

CSS 代码：

.ikinciSol #playlist li {
    min-height:40px;
    line-height:40px;
}
.ikinciSol #playlist li .fav a {
    position:relative;
    top:5px;
}

JSFiddle 链接：http: //jsfiddle.net/vZnFF/

PS：您不应该在列表项之间添加中断。PS2：你可以用 CSS 做同样的 :hover 效果。

于 2012-12-20T23:26:18.850 回答
1

您需要让社交媒体图标等于或小于<li>.

http://jsfiddle.net/32pFM/3/

.fav img{
    height: 16px;
}

注意：这只是一种选择，您还可以设置列表元素的高度。你得到跳跃的原因是由于隐藏/显示大于包含元素高度的对象。

于 2012-12-20T23:20:27.260 回答
1

通过使用边距，您走在了正确的道路上，但它们没有任何效果，因为您将 .singer 类设置为“内联”。将其更改为“inline-block”，然后使用margin-top，您可以实现您想要做的事情。

于 2012-12-20T23:20:34.343 回答
1

问题是 Facebook 和 twitter 图标的高度。您可能想要制作更小的图像或为图像设置高度：

.fav img{
    height: 1em;
}

http://jsfiddle.net/nivas/tuUhX/1/

于 2012-12-20T23:23:25.167 回答