在CSS中更改悬停时的填充
在CSS中更改悬停时的填充
提问于 2013-01-15 11:16:41
好了，新手们，正在编写我的第一个joomla模块(或者正在尝试！)。走得很远，但我的css样式有一些问题，我确信这与我的选择器和我对发生的事情缺乏理解有关！
基本上，我正在尝试让其中一个li的右填充在悬停时增长，效果是有效的，但目前两个li都在增长，而不仅仅是我悬停的那个。
任何帮助都是很棒的！
HTML
<div>
<ul id="social">
<li>one</li>
<li>two</li>
</ul>
</div>CSS
#social{
position:fixed;
z-index:1000;
top:50%;
right:0px;
list-style:none;
}
#social li{
padding-right: 5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
background-color: #202020;
border-radius: 4px 0 0 4px;
margin-top:15px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
#social li:hover{
padding-right: 25px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-01-15 11:22:15
我很确定这是因为li是一个块元素，它填充它的父元素( ul)当一个元素增长时，父元素被推出，导致另一个li填充空间。这样，li将始终保持相同的大小。
可能有一种更好的方法，但您可以将以下样式添加到li
float:right;
clear:both;这之所以有效，是因为它将元素更改为类似于内联元素，并使它们保持在右侧，但也将每个元素放在单独的一行上。
另一种方法是在li (span或a)中放置一个内联元素，并将li样式更改为a，然后添加一个li样式以简单地设置text-align:right。您可能需要一些其他的样式，但是我已经做了足够的工作来获得其中的功能。
<div>
<ul id="social">
<li><a href='#'>one</a></li>
<li><a href='#'>two</a></li>
</ul>
</div>
#social{
position:fixed;
z-index:1000;
top:50%;
right:0px;
list-style:none;
}
#social li{
text-align:right;
}
#social a{
padding-right: 5px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
background-color: #202020;
border-radius: 4px 0 0 4px;
margin-top:15px;
-moz-transition: padding-right .3s ease-in;
-o-transition: padding-right .3s ease-in;
-webkit-transition: padding-right .3s ease-in;
transition: padding-right .3s ease-in;
}
#social a:hover{
padding-right: 25px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14330608
复制相关文章
相似问题
腾讯云开发者
