HTML下拉列表不起作用

Question

这是我的代码的一部分。我正在尝试下拉。我无法选择下拉项目。如果我在最后style="padding: 80px;"元素处删除了行<span>，则效果很好。但我需要那条线来对齐。这是Fiddle

<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
<option value="0" selected>Please Select</option>
<option value="tamilnadu">Tamilnadu</option>
<option value="kerala">Kerala</option>
<option value="karnataka">Karnataka</option>
</select> 
<span style="line-height:20px"> City </span>
<span style="padding: 80px;"> State/Province </span>

请告诉您此代码中的问题。为什么padding: 80px;会导致问题？

Answer 1

您需要使用z-index切换。

请参阅：http://jsfiddle.net/3xBPL/7/

<select style="z-index:999; position:absolute">
  <option value="0" selected>Please Select</option>
  <option value="tamilnadu">Tamilnadu</option>
  <option value="kerala">Kerala</option>
  <option value="karnataka">Karnataka</option>
</select> 

<span style="padding:80px; z-index:1;"> State/Province </span>

原因：跨度区域与选择框重叠

Answer 2

而不是padding:80px尝试给予padding-left:80px。因为元素的填充与<Select>

重叠

http://jsfiddle.net/3xBPL/9/

Answer 3

填充：80px肯定是问题。

这是Firebug的屏幕截图：http://screencast.com/t/ISPMaYkyK1

这是解决方案的JSFiddle：http://jsfiddle.net/jrconway3/4gVUn/

在屏幕截图中，您可以看到填充导致跨度覆盖两个输入框。 span是一个内联元素，因此一些填充将根据具体情况工作，但它仍然尝试与其他项目对齐。垂直填充不起作用，因为从技术上讲，所有当前项目都在同一行。

padding-left: 80px;

您可以指定“padding-left”仅设置左边距。这将修复它，以便您可以正确地单击项目。更改不同元素上的z-index将使某些元素优先于其他元素，使它们显示在“其他元素之上”。但这并不能解决问题的根源。

其他人已经回答了这个问题，但我已经开始写作，所以我决定无论如何都要完成它。

Answer 4

我认为问题在你的范围内导致跨度从顶部开始。它与drowdown框重叠。

请checck JSFIDDLE

我正在编辑此代码 -

<input type="text" name="city" maxlength=20 size=15/>
<span style="padding: 10px;"></span>
<select>
  <option value="0" selected>Please Select</option>
  <option value="tamilnadu">Tamilnadu</option>
  <option value="kerala">Kerala</option>
  <option value="karnataka">Karnataka</option>
</select> 
<br>
<span style="line-height:20px"> City </span>
 <!--<span style="padding:80px; border:1px #cccccc solid;"> State/Province </span> -->
<span style="padding:0px 80px 80px 80px;"> State/Province </span>

请使用 -

padding:0px 80px 80px 80px;

Answer 5

您的代码与您的下拉列表重叠

我把它放在fiddle

中

我还给它一种颜色以使其更加醒目，尝试添加一些新的<br>以查看它是如何发生的

span{

    background-color:red;
}

Answer 6

因为，填充80px，你将扩展跨度，当你点击下拉列表时，网站说“点击的是跨度，而不是下拉，所以下拉列表不会被查看”

你可以通过这样做来添加边框..它会更清楚地向你解释

<span style="padding:80px;border:1px solid black"> State/Province </span>

你对使用填充的跨度有什么期望：顺便说一句是80px？