Hallo ich habe ein Problem beim verschachteln von Boxen. In meiner CSS-Datei werden drei Boxen dargestellt. Es sind die Boxen mit den ul-Tags und der ID "MainList". Innerhalb dieser Boxen sollen die Listenelemente nebeneinander dargestellt werden. Wenn ich jedoch für die Listenelemente das CSS-Attribut float:left; letze, springen die Listenpunkte alle aus ihrem ul-Tag und dem äußeren Rahmen. Kurz gesagt ohne float:left; befindet sich alles an richtiger stelle aber sobald ich float:left setze sind die Listenpunkte vom restlichen layout getrennt. Erst wenn ich dann die ul-tags mit entsprechenden width und height -Attributen korrigiere ist wieder alles in Form. Welche möglichkeit gibt es Listenelemente nebeneinander darzustellen sodass das layout bleibt?
Hier wird alles Korrekt dargestellt. die li-Tags werden im ul-Tag aufgelistet und die ul-Tags befinden sich innerhalb des div-tags(hauptrahmen). Allerdings möchte ich alle li-Tags nebeneinander auflisten
[
und nun der fall der nicht funktioniert
Hier wird alles Korrekt dargestellt. die li-Tags werden im ul-Tag aufgelistet und die ul-Tags befinden sich innerhalb des div-tags(hauptrahmen). Allerdings möchte ich alle li-Tags nebeneinander auflisten
[
Code:
<style type="text/css">
.main { border:1px solid #fff;}
.main ul.MainListe{list-style-type:none; border:1px solid #fff;margin-top:10px;margin-left:10px;margin-right:10px;}
.main ul.MainListe li.box {margin-top:30px;}
</style>
<div class="main">
<ul class='MainListe'>
<li class="box">
<div>
test
</div>
<div>
test
</div>
</li>
<li class="box">
test
</li>
</ul>
</div>
Code:
.main { border:1px solid #fff;}
.main ul.MainListe{list-style-type:none; border:1px solid #fff;margin-top:10px;margin-left:10px;margin-right:10px;}
.main ul.MainListe li.box {float:left;margin-top:30px;}