0

我试图在我的网站底部放置一个联系表格,但表格的底部被切掉了。你可以在这里看到一个小提琴:

http://jsfiddle.net/qKnzp/

网络表单的代码如下:

CSS

div.box{
margin:0 auto;
width:500px;
background:#222;
position:relative;
top:50px;
border:1px solid #262626;
}

div.box h1{ 
color:#FFF5CC;
font-size:18px;
text-transform:uppercase;
padding:5px 0 5px 5px;
border-bottom:1px solid #161712;
border-top:1px solid #161712; 
}

div.box label{
width:100%;
display: block;
background:#1C1C1C;
border-top:1px solid #262626;
border-bottom:1px solid #161712;
padding:10px 0 10px 0;
}
div.box label span{
display: block;
color:#bbb;
font-size:12px;
float:left;
width:100px;
text-align:right;
padding:5px 20px 0 0;
}

div.box .input_text{
padding:10px 10px;
width:200px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
}

div.box .message{
padding:7px 7px;
width:350px;
background:#262626;
border-bottom: 1px double #171717;
border-top: 1px double #171717;
border-left:1px double #333;
border-right:1px double #333;
overflow:hidden;
height:150px;
}

div.box .button
{
margin:0 0 10px 0;
padding:4px 7px;
background:#CC0000;
border:0px;
position: relative;
top:10px;
left:382px;
width:100px;
border-bottom: 1px double #660000;
border-top: 1px double #660000;
border-left:1px double #FF0033;
border-right:1px double #FF0033;
}​

HTML

<form name="htmlform" method="post" action="html_form_send.php">
      <div class="box">
           <h1>Contact Form</h1>
                    <label>
                        <span>Full name *</span>
                        <input type="text" class="input_text" name="name" id="name"
                        />
                    </label>
                    <label>
                        <span>Email *</span>
                        <input type="text" class="input_text" name="email" id="email"
                        />
                    </label>
                    <label>
                        <span>Description of the product wanted *</span>
                        <input type="text" class="input_text"
                        name="subject" id="subject" />
                    </label>
                    <label>
                        <span>Estimated Quantity *</span>
                        <input type="text" class="input_text" name="quantity"
                        id="quantity" />
                        <input type="submit" class="button" value="Submit Form" />
                    </label>
                </div>

表格应如下所示:

http://aceinfowayindia.com/blog/wp-content/uploads/2009/06/how-to-create-good-looking-form-without-table.html

请任何人解释为什么缺少底部以及为什么表单标题的样式与应有的样式不同。

任何帮助深表感谢 :)

4

1 回答 1

0
#wrapper {

溢出:隐藏;

}

一般来说,代码写得不好。学习如何编写好的 html 和 css。

于 2012-12-22T20:10:34.400 回答