Question

我没有写表单，但是css只有8行+ bootstraps构成控件，然后是javascript的一些类但是我无法弄清楚为什么占位符文本位，或者实际上它的父级div，高度变为60px左右，顶部和底部只有15px填充，然后是占位符文本的边距。我已经完成了表格控制，并且没有高度的样式，所以我无法弄明白。如果你能看起来很棒。

http://danceforovariancancer.com.au#perform

这里是联系表单html和它的css，但我建议检查元素，因为据我所知，css中没有答案：o

<section id="perform">
<div class="container-fluid apply">
   <div class="text-center row">
      <h1>Want to perform? Sign up here</h1>
   </div>
   <div class="row">
      <div class="col-lg-8 col-lg-offset-2">
         <form name="sentMessage" id="contactForm" novalidate>
            <div class="col-lg-4">
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Name</label>
                     <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Email</label>
                     <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Phone</label>
                     <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
            </div>
            <div class="col-lg-8">
               <div class="row control-group">
                  <div class="form-group col-xs-12 floating-label-form-group controls">
                     <label>Message</label>
                     <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
                     <p class="help-block text-danger"></p>
                  </div>
               </div>
            </div>
            <br>
            <div id="success"></div>
            <div class="row">
               <div class="form-group col-xs-12">
                  <button type="submit" class="btn btn-success btn-lg">Send</button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>

和css

.apply {
    background-color: #0094ab;
}
.form-control {
    color: #fff !important;
}
.floating-label-form-group {
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
    /*     padding-bottom: .5em; */
    border-bottom: 1px solid #eee;/*     color: #0094ab; */
}
.floating-label-form-group input,  .floating-label-form-group textarea {
    z-index: 1;
    color: #fff;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    background: rgba(255, 255, 255, 0.24);
    box-shadow: none!important;
    resize: none;
}
.floating-label-form-group label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease, opacity .3s ease;
    -moz-transition: top .3s ease, opacity .3s ease;
    -ms-transition: top .3s ease, opacity .3s ease;
    transition: top .3s ease, opacity .3s ease;/*     color: #fff; */
}
.floating-label-form-group-with-value label {
    top: 0;
    opacity: 1;
}
.floating-label-form-group-with-focus label {
    color: #80bc18;
}
form .row:first-child .floating-label-form-group {
    border-top: 1px solid #eee;
}
 .form-control::-moz-placeholder {
 color: #999;
 opacity: 1;
}
 .form-control:-ms-input-placeholder {
 color: #999;
}
 .form-control::-webkit-input-placeholder {
 color: #999;
/*   font-size: 12px; */
}

Answer 1

你有隐藏的标签（opacity:0）占据了空间。实际上Opacity:0隐藏了元素（这里：标签），但保留了空间。您可以使用display:none来完全隐藏元素。我希望这有帮助。

Answer 2

正如其他人所说，问题是由隐藏的标签引起的。如果您正在寻找快速解决方案，我会这样做：

在 mystyles.css 中为.form-control添加上边距。

.form-control {
    margin-top: -10px;
}

Answer 3

应用以下更改

label {
  opacity: 1 !important;
  top:0 !important;
}
.floating-label-form-group input, .floating-label-form-group textarea {
  background: rgba(255, 255, 255, 0.54) none repeat scroll 0 0;
  border: 0 none;
  border-radius: 3px;
  box-shadow: none !important;
  color: #fff;
  font-size: 1.5em;
  padding-left: 5px;
  padding-right: 0;
  position: relative;
  resize: none;
  z-index: 1;
}
.form-control {
  color: #fff !important;
  line-height: 1.5;
}

这个空地来自哪里？

3 个答案: