html - CSS 显示内联

Question

我正在尝试在输入文本中显示关闭图标。与 CSS 问题作斗争。我的代码是

<div class="input-group">
    <input type="text" class="form-control" />
    <i class="fa fa-times-circle ng-hide"></i>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">
            <span class="fa fa-search"></span> Search
        </button>
    </span>
</div>

显示在文本框控件下方，而不是显示在文本框内，您能帮我解决一下 css 问题吗

这是 sample plunker

Answer 1

• 使图标 position: absolute 并使用 right 和 top 定位。

• input-group 已经 position:relative 并且图标将相对于它定位自身。

• z-index: 2 将图标置于文本输入上方。

现在看起来像这样:

或者没有输入组和按钮:

例子

在这个例子中，我在图标元素上放置了一个额外的类(.inside)，这样它就只适用于指定的图标。

带输入组

注意 .input-group .inside { right: 100px; }。这确保了当有一个按钮(在输入组内)时，关闭按钮会在右侧获得额外的空间。

.inside {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 2;
}
.input-group .inside {
  right: 100px;
}

<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="font-awesome@*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div class="panel panel-default">
  <div class="panel-body">
    <div class="form-group">
      <div class="row">
        <div class="col-sm-4">
          <div class="input-group">
            <input type="text" class="form-control" />
            <i class="fa fa-times-circle ng-hide inside"></i>
            <span class="input-group-btn">
                   <button type="button" class="btn btn-default">
                    <span class="fa fa-search"></span> Search
            </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

没有输入组

body {
  padding-top: 50px; /* ignore this. It is just for this example*/
}
.inside {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 2;
}
.input-group .inside {
  right: 100px;
}

<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="font-awesome@*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




<div class="panel panel-default">
  <div class="panel-body">
    <div class="form-group">
      <div class="row">
        <div class="col-sm-4">

          <input type="text" class="form-control" />
          <i class="fa fa-times-circle ng-hide inside"></i>


        </div>
      </div>
    </div>
  </div>
</div>