联系表格 7 下拉菜单不可仅在一行中选择
Contact Form 7 Drop down not Selectable in one row only
表单中的所有内容都可以正常工作，即使是其他下拉菜单，但在第一行，前两个项目是不可选择的，即使它们与下拉菜单完全相同，这让我相信它的东西否则会导致问题。当我转到开发工具并突出显示它时，它会突出显示整行而不是单个菜单项。我确定这是问题所在，但不知道代码中的错误在哪里。
网站是
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 "---" "[=10=] - ,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "OVER 0,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 "---" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000"]
</p>
</div>
<!--close container div for row-->
</div>
<!--line break to start new row-->
<br>
BALANCE OWING 的 div 元素位于前面两个元素之上，如下面的快照所示：
这是因为前两个元素是浮动的。
一种解决方案是改用内联块，但我不确定这是否是最佳解决方案：
<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 "---" "[=10=] - ,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "OVER 0,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 "---" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000"]
</p>
</div>
<!--close container div for row-->
</div>
表单中的所有内容都可以正常工作，即使是其他下拉菜单，但在第一行，前两个项目是不可选择的，即使它们与下拉菜单完全相同，这让我相信它的东西否则会导致问题。当我转到开发工具并突出显示它时，它会突出显示整行而不是单个菜单项。我确定这是问题所在，但不知道代码中的错误在哪里。
网站是 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 "---" "[=10=] - ,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "OVER 0,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 "---" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000"]
</p>
</div>
<!--close container div for row-->
</div>
<!--line break to start new row-->
<br>
BALANCE OWING 的 div 元素位于前面两个元素之上，如下面的快照所示：
这是因为前两个元素是浮动的。
一种解决方案是改用内联块，但我不确定这是否是最佳解决方案：
<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 "---" "[=10=] - ,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "5,000 - 9,999" "0,000 - 4,999" "OVER 0,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 "---" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" ",000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000" "0,000"]
</p>
</div>
<!--close container div for row-->
</div>