联系表格7下拉不能仅在一行中选择

时间:2016-10-17 15:25:20

标签: html css wordpress drop-down-menu contact-form-7

表单中的所有内容都可以正常工作,即使是其他下拉菜单,但是在第一行,前两个项目是不可选择的,即使它们与下拉菜单完全相同,这使我相信它的其他原因问题。当我转到开发工具并突出显示它时,它突出显示整行而不是单个菜单项。我确定这是问题,但不知道代码中的错误在哪里。

该网站是 http://foreclosure-help.org/

这是第一行的代码(我在这里添加注释以更好地解释它们应该这样做):

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

1 个答案:

答案 0 :(得分:1)

BALANCE OWING的div元素正在前面两个元素之上,您可以在下面的快照中看到:

enter image description here

这是因为前面两个元素都是浮动的。

一种解决方案是使用内联块,但我不确定这是否是最佳解决方案:

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