Text und Button in einer Zeile ausrichten

[se-mephi]

Hallo,

ich möchte möglichst "gutes" css schreiben. Biser habe ich meist Tabellen benutzt um Elemente auszurichten. Aber das soll ja nicht so gut sein.

Ich möchte gern divs untereinander darstellen. In jedem div soll links ein button sein, und daneben text + vll mehrere kleine bildchen. Jetzt frage ich mich aber wie ich das am besten darstelle. Ohne css rutscht der text immer unter den button und mit float left im button, rutscht der text vom nächsten div über seinen button neben den button drüber. Oder soll ich dafür eine liste nehmen?

Das ganze sieht in etwa ao aus:

  
<div class="container">  
  <input type="button" value="play">  
  <div>  
    Text  
    und die Zeile darunter evt Bildchen  
  </div>  
  <img ... >  
</div>  
<div class="container">  
  <input type="button" value="play">  
  <div>  
    Text  
    und die Zeile darunter evt Bildchen  
  </div>  
  <img ... >  
</div>  

Sorry wenn die Fragestellung vll etwas komisch ist, aber mit css bin ich nicht sogut befreundet *g*

[Freddy]

Ich versteh grad nicht ganz worauf du hinaus möchtest bzw. dein Code bringt mich zum grübeln.

Probier mal:
display:inline

Gegebenfalls kannst du auch zwei Container machen. Links (Button) Rechts (Text).

[se-mephi]

Ich versteh grad nicht ganz worauf du hinaus möchtest bzw. dein Code bringt mich zum grübeln.

Probier mal:
display:inline

Gegebenfalls kannst du auch zwei Container machen. Links (Button) Rechts (Text).

Ich möchte im Grunde eine Art Playlist bauen. Für jeden Eintrag möchte ich links einen Play-Button, daneben Text wie Titel und unter dem Text, zb eine typische Sternebewertung. Rechtsbündig könnten dann noch Buttons/Icons kommen um zb den Titel zu editieren.

Wenn ich Container benutze, passiert es mir immer, dass die Elemente in dem Container "ausbrechen" und irgendwie in einen anderen hineinragen oder ähnliches..

[Beat]

Wenn ich Container benutze, passiert es mir immer, dass die Elemente in dem Container "ausbrechen" und irgendwie in einen anderen hineinragen oder ähnliches..

Arbeite mit margin-right für den Text-und-Image-Container;

mfg Beat;

[se-mephi]

Wenn ich Container benutze, passiert es mir immer, dass die Elemente in dem Container "ausbrechen" und irgendwie in einen anderen hineinragen oder ähnliches..

Arbeite mit margin-right für den Text-und-Image-Container;

mfg Beat;

so liegt der text aber dann unter dem button

  <div class="seqelemnt">  
   <div style="float:left;">  
    <input type="button" dojoType="dijit.form.Button" value="play">  
   </div>  
   <div style="margin-right:5px;clear:left;">  
    Recording  
   </div>  
  </div> 

zusätzlich noch float probiert, aber das geht auch nicht

[Freddy]

  
  <div class="seqelemnt">  
   <div style="float:left;margin-right:5px;">  
    <input type="button" dojoType="dijit.form.Button" value="play">  
   </div>  
   <div>  
    Recording  
   </div>  
  </div>  

[se-mephi]

<div class="seqelemnt">
   <div style="float:left;margin-right:5px;">
    <input type="button" dojoType="dijit.form.Button" value="play">
   </div>
   <div>
    Recording
   </div>
  </div>

  
  
dankeschön. so gehts :)  
sollte mir nochmal tutorials anschauen die in die richtung gehn. das mach ich regelmäßig falsch...

[Freddy]

CSS:

  
input {  
    float: left;  
    display: block;  
    margin-right: 20px;  
}  

margin-right ist der abstand zwischen dem Button und dem Text.