2017-09-08 4 views
1

Ich habe versucht, ein Formular auf meiner Website zu erstellen, und möchte 2 Auswahlfelder direkt nebeneinander platzieren. Ich habe es auf zwei Arten geschafft, zuerst mit flexbox und jetzt habe ich versucht, es mit Tabelle und Tabellenzellen zu tun, um zu sehen, ob es einen Unterschied machen würde.HTML 2 Auswahlfelder wirken sich immer auf das erste aus

Ich habe beide auf meinem PC arbeiten gut, aber beim Auschecken auf meinem Handy habe ich festgestellt, dass, welche Auswahl Box ich benutze, wird es immer den Wert der ersten Box bearbeiten (das passiert nur auf meinem Handy und nicht auf meinem PC, das ist das, was ich nicht verstehe)

Mein Code:

<label>Km-stand 
<div style="display:table"> 
<div style="display:table-cell"> 
    <select name="km-van" > 
    <option value="">Van</option> 
    <option value="1">1</option> 
    <option value="5000">5.000</option> 
    <option value="10000">10.000</option> 
    <option value="20000">20.000</option> 
    <option value="40000">40.000</option> 
    <option value="60000">60.000</option> 
    <option value="80000">80.000</option> 
    <option value="100000">100.000</option> 
    </select> 
</div> 
<div style="display:table-cell"> 
    <select name="km-tm" > 
    <option value="">T/m</option> 
    <option value="5000">5.000</option> 
    <option value="10000">10.000</option> 
    <option value="20000">20.000</option> 
    <option value="40000">40.000</option> 
    <option value="60000">60.000</option> 
    <option value="80000">80.000</option> 
    <option value="100000">100.000</option> 
    </select> 
</div> 
</div> 
</label> 

Hier ist auch ein JSFiddle: https://jsfiddle.net/p0qh6zbf/2/

EDIT: eine schnelle Follow-up-Frage, die wäre besser, eine Flexbox oder einen Tisch dafür zu verwenden?

+0

Welchen Browser verwenden Sie in Ihrem Telefon? Und könnten Sie versuchen zu sehen, ob das auch in einem anderen Fall passiert? –

+0

Ich habe ein iPhone, so Safari, die iOS könnte auch ein wenig veraltet sein Ich habe gerade ein anderes Telefon mit Android, das das Problem nicht hatte. – Alex

+0

Dann ist es wahrscheinlich ein Problem des Browsers, weil ich nicht sehe, warum solch eine einfache Sache ein solches Problem schaffen würde. –

Antwort

2

Ich erkannte das Problem, obwohl es nur in mobilen Safari passiert ist, was es für mich behoben hat, das Etikett sofort zu schließen, und nicht nach der Auswahl. Gefällt mir so:

<label>Km-stand</label> 
<div style="display:table"> 
<div style="display:table-cell"> 
    <select name="km-van" > 
    <option value="">Van</option> 
    <option value="1">1</option> 
    <option value="5000">5.000</option> 
    <option value="10000">10.000</option> 
    <option value="20000">20.000</option> 
    <option value="40000">40.000</option> 
    <option value="60000">60.000</option> 
    <option value="80000">80.000</option> 
    <option value="100000">100.000</option> 
    </select> 
</div> 
<div style="display:table-cell"> 
    <select name="km-tm" > 
    <option value="">T/m</option> 
    <option value="5000">5.000</option> 
    <option value="10000">10.000</option> 
    <option value="20000">20.000</option> 
    <option value="40000">40.000</option> 
    <option value="60000">60.000</option> 
    <option value="80000">80.000</option> 
    <option value="100000">100.000</option> 
    </select> 
</div> 
</div> 
+1

Ein 'Label' darf weder ein' div' enthalten noch mehrere Steuerelemente ('input',' select', etc.). Sie sollten Ihren HTML-Code immer validieren: https://validator.w3.org/ – RoToRa

Verwandte Themen