0

さて、ここで初心者、私の最初のjoomlaモジュールを書いています（またはとにかくしようとしています！）。驚くほど遠くまで行きましたが、私のcssスタイリングにいくつかの問題があります。それは私のセレクターと何が起こっているのかについての私の理解の欠如に関係していると確信しています！

基本的に、私はliのパディングの1つをホバーで右に成長させようとしていますが、効果は機能していますが、現在、ホバーしているものだけでなく、両方の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;
    }
4

1 に答える 1

2

liこれは、親 ( ) を埋めるブロック要素であるためだと確信しています。ul一方が大きくなると、親が押し出され、もう一方liがスペースを埋めます。このようにして、lis は常に同じサイズになります。

より良い方法があるかもしれませんが、次のスタイルをli

float:right;
clear:both;

これは、要素がインライン要素のように機能するように変更し、要素を右側に固定するだけでなく、それぞれを別の行に配置するため機能します。

別の方法として、インライン要素をli(spanまたは) 内に配置し、スタイルを にa変更し、スタイルを単に set に追加することもできます。おそらく他のスタイリングが必要になるでしょうが、私は機能をそこに入れるのに十分なことをしました。lialitext-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;
    }
于 2013-01-15T03:22:15.410 に答える