这个问题在我的CSS中可能是什么原因?

问题描述:

我目前已经构建了一个窗体字段(下拉菜单)和一个按钮。我碰到的唯一问题是,当我尝试在第一个下面创建另一个下拉菜单时,通过将信息从盒子中扔出来,弄乱了我的原始下拉菜单。有人可以请看一下,看看我确实做错了,因为我不确定它为什么发生。这个问题在我的CSS中可能是什么原因?

<?php 
$shows = array("Sesame Street on Ice", "The Wiggles Live", "Dora Live") 

$prices = array(29.99, 35.49, 49.95, 34.99, 9.99); 

?> 


<html> 
<head> 
<title></title> 

<style type="text/css"> 

body { 
background: tan; 
font-family: arial; 
} 

#contentwrap { 
background-color: white; 
border: 6px darkred solid; 
padding: 110px; 
width: 600px; 
margin: 20px auto 20px auto; 
border-radius: 25px; 
-moz-border-radius: 25px; 
} 

#heading { 
color: darkred; 
font-size: 2.2em; 
padding: 0px 0px 19px 0px; 
margin: -70px -90px 5px -90px; 
text-align: center; 
} 

#content { 
height: 220px; 
padding: 80px 0px 0px 0px; 
background-repeat: no-repeat; 
background-position: right; 
} 

#border { 
color: lightblue; 
border-bottom: 8px double; 
padding: 0px 0px 65px 0px; 
margin: -85px -80px 10px -80px; 
} 

#border2 { 
color: darkred; 
border-bottom: 8px double; 
padding: 0px 0px 65px 0px; 
margin: 180px -80px 0px -80px; 
} 

.formtext { 
color: lightblue; 
margin: -280px 0px 0px -50px; 
} 

.formtext2 { 
color: lightblue; 
margin: -10px 0px 0px -50px; 
} 

.formfield { 
padding: 0px; 
font-size: 1em; 
width: 250px; 
margin: 0px 0px 0px -50px; 
color: black; 
border: 2px darkred solid; 
background-color: lightyellow; 
border-radius: 4px; 
} 

</style> 
</head> 
<body> 

<div id="contentwrap"> 

<div id="heading">Online Order Event Form</div> 

<div id="border"></div> 

<div id="content"> 

<div id="border2"></div> 

<div class="formtext">Choose a show</div> 
<select class="formfield" name="Show"> 


<div class="formtext">Select a number of tickets (max 4)</div> 
<select class="formfield" name="Tickets"> 


<?php 
    for($i = 0; $i < count($shows); $i++) { 

     echo "<option value=\"". $i ."\">". $shows[ $i ] 
      ." $". $prices[ $i ] ."</option>\n"; 
    } 

?> 


</select> 

<div style="margin:160px 0px 80px -48px;"> 
    <input type="submit" value="Order Tickets" /> 
</div> 

</form> 



</div> <!-- ends div#contentwrap --> 

</body> 
</html> 
+2

SELECT“Tickets”嵌套在SELECT“Show”中...首先,用选项填充“Show”并关闭它。然后,开始下一个选择。 – djot

+0

好吧我会从那里开始谢谢 – Bill

+0

唯一的区别是我正在使用一个数组来填充上面的数据。第一个盒子工作的很好,但第二个下拉菜单根本不显示。它所做的只是将第一个下拉菜单的信息推送出去。 – Bill

您的代码有<div>标签,但没有相应的结束</div>负荷。 还有一个</form>没有相应的<form>

还可以考虑使用缩进以便于阅读。

编辑:好的,所以这是关于你的CSS和使用margin来尝试和定位的东西。