Listenelemente in Box nebeneinander

[littleHtml Freak]

hallo,

ich versuche gerade Listenelemente neben einander zu setzten. Das geht natürlich im Prinzip mit float: left im Css. wenn ich aber eine Box mit einer festen Größe drum mache, tut es nicht mehr.
Ich habe es auch mit nowrap probiert, aber es hilft alles nichts.
Hat einer ein Idee??

<div class="test">
                <ul class="test2">
                    <li class="test3">hallo</li>
                    <li class="test3">hallo</li>
                    <li class="test3">hallo</li>
                    <li class="test3">hallo</li>
                    <li class="test3">hallo</li>
                </ul>                   
            </div>

.test{
    width: 50px;
    height: 50px;
    background: gray;
}
.test2 li{
    float: left;
    list-style: none;
    border: 1px black solid;
}

die Einträge sollen einfach nebeneinander stehen, egal wie groß der div drum herum ist.

 

[Daniel_Pixelsafari.net]

display:inline :-)

 

[littleHtml Freak]

danke für deine schnelle Antwort! meinst du so?

<div class="slider_wrapper">
                <ul id="image_slider">
                    <li><img src="bilder/bewegungsmuster.png" /></li>
                    <li><img src="bilder/bg.png" /></li>
                    <li><img src="bilder/bg.png" /></li>
                    <li><img src="bilder/bg.png" /></li>
                    <li><img src="bilder/bg.png" /></li>
                </ul>                   
            </div>

.slider_wrapper{
    position: relative;
    width: 80%;
    top: auto;
    background: #555555;
    padding: 10px;
    display: inline;
}
#image_slider{
    position: relative;
    height: auto;
    list-style: none;
    /*Chrom default padding for ul is 40px */
    padding:0px;
}
#image_slider li {
    position: relative;
    padding: 10px;
}

Funktioniert leider nur bei dem Beispielcode. in meinem konkreten fall leider nicht:/

 

[Daniel_Pixelsafari.net]

Hi,

nee. inline müssen die listenelemente gesetzt werden, damit sie wie der Name ja schon sagt in einer Reihe stehen :-).

also so:

#image_slider li {
position: relative;
padding: 10px;
display:inline
}

 

[littleHtml Freak]

sieht leider so aus:
http://skulozik.ohost.de/bilder.html

 

[MrMurphy]

Hallo,

ich würde heutzutage doch die neuen Möglichkeiten von HTML5 und CSS 3 nutzen. In diesem Fall zum Beispiel flexbox. Außerdem sehe ich keinen Sinn darin, Bilder in Listen anzuordnen. Semantisch gehören die in das figure-Element.

Von der Anwendung her spielt das aber keine Rolle. Ich habe mal eine Lösung mit beiden Möglichkeiten erstellt.

http://foreninfo.bplaced.net/seiten...5_31_littlehtml_freak_01_bilder_anordnen.html

Gruss

MrMurphy

 

[littleHtml Freak]

vielen Dank! damit kann ich weiter arbeiten!