AgnusMacGyver
Neues Mitglied
Hallo zusammen,
ich habe das Problem, dass ich eine Liste, welches sich per 'float:left' in eine Zweispalter wandelt, ums Verrecken nicht zentriert bekomme.
SOLL/IST siehe Screenshot.
Eigentlich war ich der Meinung, dass man nur die UL innerhalb des #container mit "margin: 0 auto;" zentrieren müsste, aber da hatte ich wohl die Rechnung ohne CSS gemacht. :-(
Danke & Grüße,
Fritz
ich habe das Problem, dass ich eine Liste, welches sich per 'float:left' in eine Zweispalter wandelt, ums Verrecken nicht zentriert bekomme.
SOLL/IST siehe Screenshot.
Eigentlich war ich der Meinung, dass man nur die UL innerhalb des #container mit "margin: 0 auto;" zentrieren müsste, aber da hatte ich wohl die Rechnung ohne CSS gemacht. :-(
<style>
* {margin: 0; padding: 0;}
#container {
width: 100%;
border: 1px solid red; /* dient nur zur Verdeutlichung der Abmessungen des Containers*/
height: 200px;}
ul {margin: 0 auto;}
li {
width:40%;
float: left;
background-color: #FBEF69;
color: #000;
padding:10px;
margin: 10px;
text-align: center;
list-style-type: none;}
</style>
<section id="irgendeineID">
<h4>Überschrift</h4>
<div id="container">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>
</section>
* {margin: 0; padding: 0;}
#container {
width: 100%;
border: 1px solid red; /* dient nur zur Verdeutlichung der Abmessungen des Containers*/
height: 200px;}
ul {margin: 0 auto;}
li {
width:40%;
float: left;
background-color: #FBEF69;
color: #000;
padding:10px;
margin: 10px;
text-align: center;
list-style-type: none;}
</style>
<section id="irgendeineID">
<h4>Überschrift</h4>
<div id="container">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>
</section>
Danke & Grüße,
Fritz