css - 跨度为 sibling 增加了意外的高度

我在向信用卡表格的输入字段添加验证指示器时遇到麻烦。

出于某种原因，使跨度会增加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;
    }
  }
}

我该如何纠正？

最佳答案

消除多余空格的一种方法是删除元素之间的换行符或空格

你可以改变

<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类。或如下更改标记

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