Question

我是网页设计的新手，所以请原谅，如果这非常简单 - 我已经尝试了所有我知道的东西，但似乎无法做到这一点。

我使用html＆amp; amp; CSS。理想情况下，我希望从每个标签延伸1px线以用作输入指南。此行应与标签底部齐平。我还想在文本区域中垂直延伸一系列线条以允许额外的书写空间。

目前，名称和电子邮件的输入行未显示，并且在textarea的最底部只有一行用于消息。

这是我正在使用的代码：

    <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;
}

理想的结果：

ideal outcome

Answer 1

根据你的代码，我创建了一个小提琴，见下文。如有任何变更或其他要求请澄清。

小提琴：http://jsfiddle.net/EaKmZ/

演示：http://jsfiddle.net/EaKmZ/embedded/result/

注意：我没有编辑过多的代码，因此存在许多不必要的css而且不是必需的。

Answer 2

您的代码上有一些不需要的CSS规则。试试这个demo可以看到它固定到某种程度，但是使用CSS无法实现文本区域上的线条。

你需要使用图像。查看demo

css form- input / textarea造型＆amp;定位..代码＆amp;包括图像

2 个答案: