Formulaire de contact 7 Liste déroulante non Sélectionnable sur une seule ligne

Question

Tout dans le formulaire fonctionne très bien même les autres menus déroulants mais sur la première rangée, les deux premiers éléments ne sont pas sélectionnables, même si elles sont exactement les mêmes que la baisse les bas qui me conduit à croire que c'est quelque chose d'autre qui cause le problème. Quand je vais dans les outils de développement et que je le surligne, cela met en évidence toute la ligne et pas le seul élément du menu. Je suis sûr que c'est le problème mais je ne sais pas où est l'erreur dans le code.

Le site est http://foreclosure-help.org/

Voici le code pour la première ligne (j'ajouter des commentaires ici pour mieux expliquer qu'ils sont censés faire):

<!--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

L'élément div pour BALANCE VERSER devient au-dessus des deux éléments précédents, comme vous pouvez le voir dans l'instantané ci-dessous:

Cela se produit parce que les deux éléments précédents sont flottants.

Une solution consiste à utiliser des blocs inline à la place, mais je ne suis pas sûr que ce soit la meilleure solution:

<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>