Vorgehen: Elemente auf eine Höhe bringen

[Chosi]

Hallo zusammen,

diesmal kein Darstellungsproblem, sonderen eine Konzeptfrage: WIe gehe ich am besten vor, wenn ich mehrere Elemente nebeneinander schön auf eine Höhe bringen will.
Im meinem Fall geht es um eine Suchleiste. Erst ein wenig Text, dann ein Inputfeld, Submitbutton, wieder ein wenig Text, etc...

Wie bekomme ich das nun am besten auf einer Linie ausfgereiht, so dass es auch nach etwas aussieht? . Ohne jegliche CSS-Definitionen schaut das ja aus wie Kraut und Rüben

 

[Maik]

Hi,

ich würde die "Segmente" in ein Listenelement einbetten:

<form>
      <ul>
          <li>Dummy-Text</li>
          <li><input type="text"></li>
          <li><input type="submit" value="submit"></li>
          <li>Dummy-Text</li>
      </ul>
</form>

und dieses horizontal ausrichten:

form li {
display:inline;
}

mfg Maik

 

[Chosi]

Hi,

geht aber dadurch nicht die Semantik der HTML-Tags verloren?
Außerdem bringt dieser Ansatz leider keine Veränderung. Die verschiedenen Brwoser richten die Elemente einfach unterschiedlich aus. FF nahezu mittig, IE eher untenbündig. Am liebsten hätte ich die Elemente wie an einer Perlenkette aufgereiht ... Wenn man beispielsweise via position: relative unter FF nachhilft, verschlimmbessert man's in allen anderen Browsern. hm, schwierig

 

[Maik]

Ich wüsste jetzt ehrlich gesagt nicht, inwiefern der Einsatz des Listenelements die Semantik negativ beeinträchtigt. :suspekt:

Zum Thema "browserübergreifendes Formatieren von Formularelementen" empfehle ich dir den aufschlussreichen Artikel Styling form controls.

mfg Maik

 

[Maik]

Nachtrag zum verwendeten Listenelement im Formular: Prettier Accessible Forms.

Soviel zum Thema "Semantik der HTML-Tags"

mfg Maik