css - 在 CSS 中悬停时更改填充

Question

好的伙计们，这里是菜鸟，正在编写我的第一个 joomla 模块(或者无论如何都在尝试!)。出人意料地走了很远，但我的 CSS 样式有一些问题，我确定这与我的选择器有关，而且我对发生的事情缺乏了解!

基本上，我试图让 li 的 padding-right 之一在悬停时增长，效果正在发挥作用，但目前两个 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;
    }

Answer 1

我很确定这是因为 li 是一个 block 元素，它填充了它的父元素(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;
    }