css - 跨度向 sibling 添加意外高度

Question

我在向信用卡表单中的输入字段添加验证指示器时遇到问题。

出于某种原因，使用 span 会增加 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>

另一种方式是设置父元素类'font-size归零。

所以尝试添加

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

到input-group类(class)。或者如下更改标记

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

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

另一种方式是添加

float:left;

到validity类(class)。您可能还必须将其添加到输入的类中。

编辑

看来问题与上述问题无关。

只需删除 <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>