我是网页设计的新手,所以如果这非常简单,请原谅 - 我已经尝试了我所知道的一切,但似乎不太正确。
我已经使用 html 和 css 制作了一个联系表单。理想情况下,我希望从每个标签延伸出一条 1px 的线作为输入指南。这条线应与标签底部齐平。我还想要在文本区域中垂直延伸的一系列线条,以留出额外的书写空间。
目前,Name 和 Email 的输入行没有显示,Message 的文本区域只有最底部的一行。
这是我正在使用的代码:
<div id="contact-form">
<div id="invite">
<h1>Let's Talk.</h1>
<div class="postinfo">
<h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2>
</div><!-- end postinfo -->
</div><!-- end invite -->
<form>
<label for="user">Name:</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Message:</label>
<textarea name="comments"></textarea><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
</div><!-- end contact -->
#contact-form {
float: left;
margin-left: 300px;
margin-top: 310px;
}
#invite .postinfo {
list-style-type: none;
width: 150px;
}
label {
float: left;
font-family: dalle;
font-size: 160%;
letter-spacing: 2px;
text-transform: uppercase;
margin-left: 200px;
margin-top: -105px;
width: 120px;
}
input, textarea {
border-style: none;
border-bottom: 1px solid #202020;
margin-bottom: 5px;
margin-left: 300px;
margin-top: -105px;
width: 245px;
}
textarea {
width: 250px;
height: 150px;
}
#submitbutton {
background: none;
border-style: none;
font-family: Georgia,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
margin-left: 173px;
margin-top: 5px;
width: 90px;
}
br {
clear: left;
}
理想的结果:
最佳答案
根据您的代码,我创建了一个 fiddle ,请参见下文。如果有任何更改或其他要求,请说明。
fiddle :http://jsfiddle.net/EaKmZ/
演示:http://jsfiddle.net/EaKmZ/embedded/result/
注意:我没有对您的代码进行太多编辑,所以存在很多不需要的 CSS。
关于css form- input/textarea 样式和定位.. 包括代码和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9776330/