Question

我无法在信用卡表单的输入字段中添加验证指标。

出于某种原因，让跨度增加span.input-group-addon的高度，导致输入下方的空白

<template name="checkoutForm">

<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Title</h4>
  </div>

  <div class="modal-body">
    <form class="bs-example bs-example-form">

        <div class="no-margin">
          <div class="col-xs-12">
            <div class="input-group">
              <span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span>
              <input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
              <span class="validity"></span>
            </div>
          </div>

少而且

@import '../../../../stylesheets/variables.import.less';
@import '../../../../stylesheets/mixins.import.less';


.checkout-form {
  max-width: 350px;
  margin: auto;

  .no-margin {
    .form-group {
      width: 80%;
      margin: 0px;
    }
  }

  .validity {
    overflow: auto;
    position: relative;
    top: -27px;
    left: 215px;
    z-index: 1000;
    .valid {
      color: @brand-primary;
    }
    .invalid {
      color: red;
    }
  }
}

我该如何纠正？

Answer 1

摆脱额外空格的一种方法是删除元素之间的换行符或空格

您可以更改

<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number">
<span class="validity"></span>

到

<input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number"><span class="validity"></span>

另一种方法是设置父元素类＆＃39; font-size属性为零。

所以尝试添加

font-size:0;
white-space:nowrap;

到input-group课程。或者更改标记如下

<div class="input-group" style="font-size:0;white-space:nowrap;">

但是你必须在font-size类中指定validity属性才能显示其中的文本。

另一种方法是添加

float:left;

到validity课程。您可能还必须将其添加到输入的课程中。

修改

问题似乎与上述问题无关。

只需删除<span class="validity"></span>之外的<div class="input-group">，如下所示，看看是否有效

<div class="input-group"> <span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span> <input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number"> </div> <span class="validity"></span>

编辑2

按如下方式更改validity课程

.validity { overflow: auto; position: absolute; top: 5px; left: 215px; z-index: 1000; }

并使用下面的标记（您的原始文件）

<div class="input-group"> <span class="input-group-addon input-group-sm"><i class="fa fa-credit-card"></i></span> <input type="text" class="form-control" id="checkoutCardNumber" placeholder="Card Number"> <span class="validity"></span> </div>

跨度为兄弟添加意外的高度

1 个答案: