Ändern Sie die Polsterung auf hover in CSS

Ok Leute, noob hier, Schreibe meine erste joomla-Modul (oder es versucht ja eh keiner!). Bekommen erstaunlich weit, aber ich habe einige Probleme mit meinem css-styling, ich bin sicher das seine zu tun, mit meiner Wähler und mein Unverständnis über das, was passiert!

Grundsätzlich Im Versuch, um eine der li padding-right wachsen auf hover-Effekt funktioniert, aber derzeit haben sowohl die li ' s sind, wächst eher, als nur die, die ich bin, schweben auf.

Jede Hilfe wäre genial!

DEN 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;
    }
InformationsquelleAutor rowanwins | 2013-01-15
  1. 2

    Ich bin mir ziemlich sicher, dass dies ist, weil li ist ein block-element, das füllt Eltern (die ul), Wenn eine wächst, der andere Elternteil ist, geschoben, wodurch die anderen li um den Raum zu füllen. Diese Art der lis haben immer die gleiche Größe.

    Gibt es vielleicht einen besseren Weg, aber man könnte hinzufügen, die folgenden Ausführungen zu den li

    float:right;
clear:both;

    Dies funktioniert, weil es ändert sich die Elemente Verhalten sich wie inline-Elemente und hält Sie fest an der rechten Seite, sondern stellt auch jeweils in einer eigenen Zeile.

    Alternative ist ein inline-element innerhalb des li (span oder a), und ändern Sie die li Stile a, und fügen Sie eine li Stil einfach text-align:right. Sie werden wahrscheinlich wollen einige andere styling -, aber ich hatte einfach genug ist, um die Funktionalität dort.

    <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;
    }
    • danke Tom, dein top-Vorschlag, der die float-und clear hat den trick!
    InformationsquelleAutor Tom Pietrosanti
Schreibe einen Kommentar