【问题标题】：Contact form design issue in CSSCSS中的联系表单设计问题
【发布时间】：2014-10-26 00:01:06
【问题描述】：

我正在尝试用 HTML 和 CSS 编写下面的联系表单。问题是如何在一个容器中制作输入、文本区域和发布按钮，并考虑到每个容器都有一个标签（out容器）。

对于名称，标签在右侧。它在电子邮件的左侧。然后，textarea 标签贴在顶部（我尝试使用 bottom:100px 和 position:relative 并且它有效）但我正在寻找更理想的解决方案。

请在fiddle中找到代码：（查看全屏以获得更好的视图）

输入组 CSS：

.post .contact form .input-group {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 15px;
  position: relative;
}

PS：布局应该是响应式的并且适用于所有屏幕。

谢谢，

【问题讨论】：

jsfiddle.net/wa7xs9vu/3
...在移动设备上放大时，文本应位于输入上方。
@shadeed9 你想让它也响应吗？
@KK 是的，我希望它能够响应。
@shadeed9 在这种情况下，您可以尝试我的答案并通过更改伪元素的 css 使其响应。如果适合您的需要，请先尝试。
@KK 你能再检查一下小提琴吗？这些字段相互重叠。也许是因为接触类的 100% 宽度？

标签： html css css-float

【解决方案1】：

您正在使用 Bootstrap 类，但也在创建自定义 css。然而，小提琴中没有指向 Bootstrap css 的链接。如果您熟悉 Bootstrap 中的网格系统并使用它加上一些自定义 css，则可以更好地控制。

首先，您应将表单布局为应堆叠在较小的视口。
然后在您选择的最小宽度媒体查询中，基于网格表单中使用的类，以及标签的宽度在表单之外，您可以创建推出标签的样式。
在 .post 上选择一个最大宽度，它是 992px (col-md) 和 1200px (col-lg) 的最大宽度

演示：http://jsbin.com/vefufi/1/

HTML：

<div class="post">
 <div class="contact">
   <div class="title">
      <h2>Post a comment</h2>
   </div>
   <form class="comment-form">
      <div class="row">
         <div class="col-sm-6 form-group">
            <label class="name">Use Your Real Name</label>
            <input type="text" class="form-control" placeholder="Name"/>
         </div>
         <div class="col-sm-6 form-group">
            <label class="email">Email Will Not Be Published</label>
            <input type="text" class="form-control" placeholder="Email" />
         </div>
         <div class="clearfix"></div>
         <div class="col-md-12 form-group">
            <label class="message">Write a good comment</label>
            <textarea name="" class="form-control" cols="47" rows="7" placeholder="Message"></textarea>
         </div>
         <div class="col-md-12 form-group">
           <button class="btn btn-block btn-lg btn-success">Button</button>
        </div>        
        
      </div>
   </form>
  </div>
</div>

CSS

.post {
    padding: 0 1.5% /* matches the column and -margin values */
}
.comment-form .form-control {
    border: 0px;
    background: #eee;
    min-height: 50px; /* make the .form-control taller */
}
.comment-form > .row {
    margin: 0 -1.5%; /* negative margin on row for new, fluid gutter */
}
.comment-form [class*="col-"] {
        padding: 0 1.5% /* new fluid gutter to tighten up the space between col-X-6 */
}


@media (min-width:992px) { 
    .post {
        width: 50%;
        max-width: 500px;
        margin: 0 auto;
    }
    .comment-form label {
        position: absolute;
        width: 200px;
    }
    .comment-form .name {
        left: -90%;
        top: 8px;
        text-align: right;
    }
    .comment-form .email {
        right: -90%;
        top: 8px;
    }
    .comment-form .message {
        left: -45%;
        top: 50%;
        margin-top: -16px;
        text-align: right;
    }
}


@media (min-width:1200px) { 
    .post {
        max-width: 525px;
    }
}

【讨论】：

【解决方案2】：

实际上，您已经正确地完成了，将标签绝对相对于容器定位。没有其他好方法，但如果你可以使用像 kraken 或其他的网格框架，你可以使用网格来布置它。如果您在右侧制作标签，请务必在移动设备上查看。他们应该级联，因此我认为你不支持较低的分辨率
网格示例： http://cferdinandi.github.io/kraken/grid.html

【讨论】：

【解决方案3】：

如果你习惯使用伪元素，你可以试试这个方法：

演示：http://jsfiddle.net/lotusgodkk/wa7xs9vu/4/

HTML：

<div class="post">
    <div class="contact col-lg-6">
        <div class="title">
             <h2>Post a comment</h2>
        </div>
        <form>
            <div class="input-group name">
                <input type="text" placeholder="Name" />
            </div>
            <div class="input-group email">
                <input type="text" placeholder="Email" />
            </div>
            <div class="input-group message">
                <textarea name="" id="" cols="47" rows="7" placeholder="Message"></textarea>
            </div>
        </form>
    </div>
</div>

您可以从 html 中删除标签。

CSS：

.col-lg-6 {
    width: 50%;
}
.post .contact {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.post .contact .title {
    display: inline-block;
    width: 100%;
}
.post .contact form {
    display: table;
    margin: 0 auto;
}
.post .contact form .input-group {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 15px;
    position: relative;
    vertical-align:top; //added
}
.post .contact form .input-group label {
    color: #8e8e8e;
}
.post .contact form .input-group input[type="text"] {
    background: #ebebeb;
    border: 0;
    outline: 0;
    height: 50px;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 16px;
}
.post .contact form .input-group textarea {
    background: #ebebeb;
    border: 0;
    outline: 0;
    border-radius: 5px;
    padding: 15px;
    font-size: 16px;
}
.post .contact form .post {
    width: 100%;
    background: #3eb3a5;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    display: inline-block;
}
.post .contact form .full {
    width: 100%;
}
.post .contact form .half {
    width: 100%;
}
.post .contact form .half input[type="text"] {
    width: 48%;
}
.post .contact form .name input[type="text"] {
    float: left;
}
/*New CSS */
.name:before{
    content:"Use Your Real Name";
    position:absolute;
    right:100%;
    white-space:nowrap;
    top:15px;
    font:inherit;
    color:grey;
    padding: 0 5px;   

}
.email:after{
    content:"Email Will Not Be Published";
    position:absolute;
    left:100%;
    white-space:nowrap;
    top:15px;
    font:inherit;
    color:grey;
    padding: 0 5px;
}
.message:before{
    content:"Write a good comment";
    position:absolute;
    right:100%;
    white-space:nowrap;
    top:15px;
    font:inherit;
    color:grey;
    padding: 0 5px;   

}

【讨论】：