unForastero

<Webworking>


eine (ul-) Liste horizontal zentrieren ohne die Breite zu kennen?

Freitag, 27 März 2015       



Die Ausgangssituation im HTML Code ist ein umschließendes Element und unsere Liste mit variabler Anzahl Listenelementen drin und ohne feste Breitenangaben (damit es sich auch in responsiver Umgebung wohl fühlt).

  <div id="footer">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Datenschutz</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>

Es gibt 2 Lösungen. Wenn die Listenelemente mit display:inline;  umschrieben werden dürfen, dann behebt

folgendes CSS das Problem:

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }
Nun ist es in den meisten Fällen aber so, das man die Listenelemente mit display:block auszeichnen muss, dann bewirkt folgendes CSS das erhoffte Wunder:
#footer { width: 100%; overflow: hidden; }

#footer ul {
list-style: none;
position: relative;
float: left;
display: block;
left: 50%; }

#footer ul li {
position: relative;
float: left;
display: block;
right: 50%; }




diese Seite teilen:




Kommentare












neu laden








2009 - 2017 Copyright © unforastero.de       rechtliche Hinweise |  Impressum |  Datenschutz