Ausrichten von <input> & <button> Tags

Question

Ich habe eine sortierte Liste, die ein `` und ein Feld enthält. Wenn ich sie rendere, werden die Felder in 2 separaten Zeilen angezeigt. Wie bekomme ich sie in dieselbe Zeile?

HTML- Los ``

Ich habe sie sogar aus dem

• ``entfernt und in einem separaten

  platziert, jedoch ohne Erfolg. Welches CSS muss hier hinzugefügt werden, um dieses Standardverhalten zu überwinden?

  UPDATE: Ich habe diese beiden Tags jetzt aus der sortierten Liste entfernt und in ein

  gestellt. Es sieht jetzt so aus -

      Los

  Keine Auswirkung bei Verwendung von float:left; oder display:inline-block.

  ``

Answer 1

    Los

Answer 2

Die Schaltfläche "Senden" scheint in verschiedenen Browsern unterschiedliche Standardmargen und -padding-Werte zu haben.

Ich gehe davon aus, dass dies in einem Reset-Stylesheet sein muss, da dies nicht die einzige ärgerliche Differenz bei den "Standard"-Werten zwischen den Browsern ist. Wann das Web dies standardisieren wird, ist ein anderes Thema.

So machen wir das:

#searchForm {
    position: relative;   // du musst das beibehalten
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchEntry {
    padding: 0;    // du musst das beibehalten
    margin: 0;     // du musst das beibehalten
    margin-top: 3px;
    width: 198px;
    font: 17px Arial,Helvetica,sans-serif;
}
input#searchBtn{
    padding: 0;   // du musst das beibehalten
    margin: 0;    // du musst das beibehalten
    position: absolute;   // du musst das beibehalten
    left: 203px;
    top: 2px;
    height: 24px;
    width: 42px;
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
    cursor:pointer;
    cursor:hand;
}

Ich habe sehr geringfügige Unterschiede zwischen IE8, Firefox und GChrome bemerkt, aber es könnte auch in anderen Browsern vorkommen.

Das Formular hier hat seine Position auf "relative" gesetzt, damit, wenn ich die Position der Schaltfläche auf absolut setze, die Schaltfläche sich relativ zum searchForm positioniert.

Answer 3

Es sollte in der gleichen Zeile sein.

Bitte überprüfen Sie die Breite des

• und des übergeordneten Tags von
• ( oder ähnliches). Ich denke, dass das dieses Problem verursachen kann.