Mehr als ein Element in waagerechter Liste

[lablala]

Hallo,
mein Problem ist folgendes:
Ich habe eine Liste (ul) welche ich waagerecht ausgerichtet habe. Will ich in die einzelnen Listenpunkte nun mehr als nur ein Bild packen wird die liste wieder senkrecht dargestellt. Ich verstehs echt nicht. Wie bekomme ich die Liste an sich wieder waagerecht?

Hier mal die CSS:

#scroller{    position: absolute;
    top:150px;
    left:0px;
    width:100%;
    overflow: hidden;
}


#hallo{
    list-style-type: none;
    white-space:nowrap;
    height: 500px;
    border:1px solid green;
}


#hallo li{
    display: inline;
    height: 500px;
    border: 1px solid red;
}

Und hier die Html:

	<div id="scroller">			<ul id="hallo">
			<li>
					<img src="armband1.png" class="elementpic">
					<p id="txt">bla</p>  <!-- Hier liegt das Problem-->
					<div>irgendeininhalt</div>
			</li>
			<li>
					<img src="armband1.png" class="elementpic">
					
			</li>
			<li>
					<img src="armband1.png" class="elementpic">
			</li>
		</ul>
	</div>

Lg Lukas

 

[Wustersoss]

Hallo,

Du hast den Listenelemente das Attribut inline zugewiesen, es sollen aber Blockelemente für dich sein.
Wenn du nun Blockelemente nebeneinander platzieren willst kannst du das mit float:left erledigen.

Versuch das mal und lies dir durch was der unterschied ist zu deinem Vorgehen.