2017-07-28 7 views
0

Dies ist ein Duplikat der Display two options within select box side by sideAuswahlfeld Optionen nebeneinander Auflistung nicht über andere

Mir Verwendung JQuery Selectric-Plugin für ausgewählte Elemente unangetastet Standard-CSS für das Plugin zur Verfügung gestellt werden. Alles sieht gut aus, außer dass die Dropdown-Liste niemals eine Option unter der anderen anzeigt, wie Sie es immer erwarten, sondern sie werden nebeneinander in einer Zeile angezeigt. Selbst wenn ich die Breite des Elements reduziere, werden sie nie normal angezeigt.

Mit anderen Worten, sie zeigen wie folgt.

SELECT BOX

Option1 Option2 Option3 Option4 etc

Die select ist innerhalb eines div, der Schwimmer ist: links aber egal welchen Stil ich versuche, auf das Element hinzufügen, die Optionen zeigen nie richtig. Sie sind jedoch richtig getrennte Auswahlmöglichkeiten mit korrekten Mouseover-Effekten usw. - nur nebeneinander nicht eins unter anderen.

Irgendwelche Ideen, wie ich das Element im Standardformat für die vertikale Auflistung anzeigen kann?

Danke.

HTML ist so einfach wie ich es vorgeschlagen habe.

<select> 
<option value="1">Apples</option> 
<option value="2">Bananas</option> 
<option value="3">Peaches</option> 
<option value="4">Pears</option> 
</select> 

Die enthaltenen Divs sind als

<div id="page"> 
<div id="main"> 
<div id="info"> 
</div> 
</div> 
</div> 

Styles folgt als

div#page {position:absolute;left:0px;right:0px;top:110px;width:100%;} 
div#main {margin:auto;left:0px;right:0px;text-align:left;max-width:1100px;padding-left:20px;padding-right:20px;} 
div#info {float:left;width:46%;margin-left:4%} 
+0

Share your html –

+0

Mögliches Duplikat von [Zwei Optionen im Auswahlfeld nebeneinander anzeigen] (https://stackoverflow.com/questions/27444227/display-two-options-within-select-box-side-by- Seite) –

+0

@chirag - nicht wirklich ein Duplikat, da dies unbeabsichtigtes Verhalten ist und nicht von einem anderen Plugin gelöst wird, da es nicht an erster Stelle passieren soll – RobertyBob

Antwort

0

Durch einen Prozess der Eliminierung folgt scheint es, dass die CSS-Flex-Styling für die 'ul' Elemente dieses Verhalten verursacht . Also ich denke, wenn Sie das wirklich wollen, dann benutzen Sie display: flex etc, um mit den Dropdown-Optionen zu verwirren.

Verwandte Themen