Kontaktformular 7 Dropdown nicht auswählbar nur in einer Zeile

Question

Alles im Formular funktioniert auch in den anderen Dropdown-Menüs gut, aber in der ersten Zeile sind die ersten beiden Elemente nicht auswählbar, obwohl sie genau mit dem Drop identisch sind Tiefen, die mich glauben machen, dass etwas anderes das Problem verursacht. Wenn ich zu den Dev Tools gehe und es hervorhebe, markiert es die gesamte Zeile und nicht den einzelnen Menüpunkt. Ich bin sicher, dass dies das Problem ist, aber nicht wissen, wo der Fehler im Code ist.

Die Seite ist http://foreclosure-help.org/

Hier ist der Code für die erste Reihe ist (I Kommentare hier besser bin Zugabe zu erklären, dass sie tun sollen):

<!--this is the container div for the whole form--> 
<div style="background: rgba(0, 0, 0, 0.5); width:747px; height:520px; margin-top:20px;" class="container"> 

<!--Header styling--> 
<h3 style="color:white; padding-left:25px;" id="show">ABOUT YOUR HOME LOAN</h3> 

<!--container for first row--> 
<div style="color:white;"> 

<!--First menu items--> 
<div style="float:left; margin-right:10px; margin-left:10px; padding-left:20px; opacity:1 !important;" id="show"> 
<p> PROPERTY VALUE:<br /> 
[select PropertyValue id:PropertyValue "---" "$0 - $99,999" "$100,000 - $124,999" "$125,000 - $149,999" "$150,000 - $174,999" "$175,000 - $199,999" "$200,000 - $224,999" "$225,000 - $249,999" "$250,000 - $274,999" "$275,000 - $299,999" "$300,000 - $324,999" "$325,000 - $349,999" "$350,000 - $374,999" "$375,000 - $399,999" "$400,000 - $424,999" "$425,000 - $449,999" "$450,000 - $474,999" "$475,000 - $499,999" "$500,000 - $524,999" "$525,000 - $549,999" "$550,000 - $574,999" "$575,000 - $599,999" "$600,000 - $624,999" "$625,000 - $649,999" "$650,000 - $674,999" "$675,000 - $699,999" "$700,000 - $724,999" "OVER $730,000"] 
</p> 
</div> 

<!--second menu items--> 
<div style="float:left; margin-right:10px; margin-left:10px;" id="show"> 
<p> YOUR LENDER:<br /> 
[text YourLender id:YourLender] 
</p> 
</div> 

<!--third and last menu item in first row--> 
<div style="margin-left:10px;" id="show"> 
<p STYLE="color:white !important;"> BALANCE OWING:<br /> 
[select BalanceOwing id:BalanceOwing "---" "$10,000" "$20,000" "$30,000" "$40,000" "$50,000" "$60,000" "$70,000" "$80,000" "$90,000" "$100,000" "$110,000" "$120,000" "$130,000" "$140,000" "$150,000" "$160,000" "$170,000" "$180,000" "$190,000" "$200,000" "$210,000" "$220,000" "$230,000" "$240,000" "$250,000" "$260,000" "$270,000" "$280,000" "$290,000" "$300,000" "$310,000" "$320,000" "$330,000" "$340,000" "$350,000" "$360,000" "$370,000" "$380,000" "$390,000" "$400,000" "$410,000" "$420,000" "$430,000" "$440,000" "$450,000" "$460,000" "$470,000" "$480,000" "$490,000" "$500,000" "$510,000" "$520,000" "$530,000" "$540,000" "$550,000" "$560,000" "$570,000" "$580,000" "$590,000" "$600,000" "$610,000" "$620,000" "$630,000" "$640,000" "$650,000" "$660,000" "$670,000" "$680,000" "$690,000" "$700,000" "$710,000" "$720,000" "$730,000"] 
</p> 
</div> 

<!--close container div for row--> 
</div> 

<!--line break to start new row--> 
<br> 

Answer 1

Das div Element für BALANCE auf Grund wird immer an der Spitze der beiden vorhergehenden Elemente, wie Sie im Snapshot unten sehen können:

Dies geschieht, weil die beiden vorhergehenden Elemente floating sind.

Eine Lösung ist stattdessen Inline-Blöcke zu verwenden, aber ich bin nicht sicher, ob dies die beste Lösung ist:

<div style="color:white;"> 

<!--First menu items--> 
<div style="display: inline-block; margin-right:10px;margin-left:10px;padding-left:20px;opacity:1 !important;" id="show"> 
<p> PROPERTY VALUE:<br> 
[select PropertyValue id:PropertyValue "---" "$0 - $99,999" "$100,000 - $124,999" "$125,000 - $149,999" "$150,000 - $174,999" "$175,000 - $199,999" "$200,000 - $224,999" "$225,000 - $249,999" "$250,000 - $274,999" "$275,000 - $299,999" "$300,000 - $324,999" "$325,000 - $349,999" "$350,000 - $374,999" "$375,000 - $399,999" "$400,000 - $424,999" "$425,000 - $449,999" "$450,000 - $474,999" "$475,000 - $499,999" "$500,000 - $524,999" "$525,000 - $549,999" "$550,000 - $574,999" "$575,000 - $599,999" "$600,000 - $624,999" "$625,000 - $649,999" "$650,000 - $674,999" "$675,000 - $699,999" "$700,000 - $724,999" "OVER $730,000"] 
</p> 
</div> 

<!--second menu items--> 
<div style="display: inline-block; margin-right:10px;margin-left:10px;" id="show"> 
<p> YOUR LENDER:<br> 
[text YourLender id:YourLender] 
</p> 
</div> 

<!--third and last menu item in first row--> 
<div style="display: inline-block; margin-left:10px;" id="show"> 
<p style="color:white !important;"> BALANCE OWING:<br> 
[select BalanceOwing id:BalanceOwing "---" "$10,000" "$20,000" "$30,000" "$40,000" "$50,000" "$60,000" "$70,000" "$80,000" "$90,000" "$100,000" "$110,000" "$120,000" "$130,000" "$140,000" "$150,000" "$160,000" "$170,000" "$180,000" "$190,000" "$200,000" "$210,000" "$220,000" "$230,000" "$240,000" "$250,000" "$260,000" "$270,000" "$280,000" "$290,000" "$300,000" "$310,000" "$320,000" "$330,000" "$340,000" "$350,000" "$360,000" "$370,000" "$380,000" "$390,000" "$400,000" "$410,000" "$420,000" "$430,000" "$440,000" "$450,000" "$460,000" "$470,000" "$480,000" "$490,000" "$500,000" "$510,000" "$520,000" "$530,000" "$540,000" "$550,000" "$560,000" "$570,000" "$580,000" "$590,000" "$600,000" "$610,000" "$620,000" "$630,000" "$640,000" "$650,000" "$660,000" "$670,000" "$680,000" "$690,000" "$700,000" "$710,000" "$720,000" "$730,000"] 
</p> 
</div> 

<!--close container div for row--> 
</div>