我的 CSS 中出现此问题的原因可能是什么？答案

【问题标题】：What could be the reason for this issue in my css?我的 CSS 中出现此问题的原因可能是什么？
【发布时间】：2013-10-07 14:20:05
【问题描述】：

我目前已经构建了一个表单域（下拉菜单）和一个按钮。我遇到的唯一问题是，当我尝试在第一个下拉菜单下方创建另一个下拉菜单时，它会通过将信息扔出盒子来弄乱我原来的下拉菜单。有人可以看看我到底做错了什么，因为我不确定它为什么会发生。

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

【问题讨论】：

SELECT "Tickets" 嵌套在 SELECT "Show" ... 首先，用选项填充 "Show" 并关闭它。然后，开始下一个 SELECT。
好的，我从那里开始，谢谢
唯一的区别是我使用数组来填充数据，就像我上面的一样。第一个框效果很好，但第二个下拉菜单根本不显示。它所做的只是推送第一次下拉的信息。
你应该抓取渲染的 html 和 css 并在 jsfiddle 上构建一个 repro
您应该建立一个 IRC 代理，以便将其用作 Web 服务。

标签： php html css arrays

【解决方案1】：

您的代码有大量<div> 标签，但没有相应的结束</div>。还有一个</form>，没有对应的<form>。

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

编辑：好的，这与您的 CSS 和使用 margin 来尝试定位事物有关。

【讨论】：