CSS：在填充内设置内联元素

Question

我在看Instagram的网站。我注意到他们在相邻输入的填充内放置了一个缩放图标。我想知道这是怎么做的，有人能告诉我一个例子

谢谢。

Answer 1

以下是根据您的参考，焦点显示隐藏图标上的jQuery搜索框的示例。我希望这个答案会有所帮助。

$('.btn-close').hide();
$('.fa-search').show();
$('.input-text').on('focus', function() {
    $(this).siblings('.btn-close').show();
    $(this).siblings('.fa-search').hide();
});
$('.btn-close').click(function(e) {
    $('.fa-search').show();
    $('.btn-close').hide();
    e.stopPropagation();
});
$('.input-text').on('focusout', function() {
    $(this).siblings('.btn-close').hide();
    $(this).siblings('.fa-search').show();
});

.input-text {
    border: 1px solid #888;
    min-height: 40px;
    font-size: 16px;
    padding: 0 25px 0 5px;
}

.input-box {
    position: relative;
    display: inline-block;
}

.input-box .fas,
.btn-close {
    position: absolute;
    right: 0;
    padding: 11px 4px;
    top: 0;
    color: #888;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-box">
    <input type="text" class="input-text" placeholder="text">
    <i class="fas fa-search"></i>
    <a class="btn-close" href="#"><i class="fas fa-times-circle"></i></a>
</div>

Answer 2

答案是他们实际上并没有将图标放在输入框内。只需在图标和<input>周围画一个矩形。图标本身被添加到问题图像中突出显示的<span>之后的行上的<input>。寻找班级coreSpriteSearchIcon。

当我检查<span>时，我看到这些样式适用：

background-image: 
  url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png);
}

background-size: 410px 396px;
background-position: -240px -366px;

height: 10px;
width: 10px;

background-image是精灵文件（包含多个较小图像的图像）。 background-size确保图像不被拉伸。 background-position告诉你在更大的精灵图像中找到搜索图标的位置。而且，width和height告诉你要显示多少图像。

他们能够通过使用absolute定位将它放置在原处：

left: 11px;
position: absolute;
top: 9px;
z-index: 2;

Answer 3

实现这一目标的方法之一是使用position: absolute并将输入放入包装器中。让我演示给你看：

.input-wrapper {
  position: relative;
}

.input-wrapper img {
  position: absolute;
  top: 5px;
  left: 5px;
}

input {
  height: 40px;
  width: 200px;
  padding-left: 35px;
  
  font-size: 20px;
  
  box-sizing: border-box;
}

<div class="input-wrapper">
  <img src="https://picsum.photos/30"/>
  <input type="text" />
</div>

所以基本上我们使用position: relative来相对移动img。另请注意，您必须添加额外的padding（在这种情况下为左侧），因此文本不会与图标重叠。

有很多方法可以做同样的事情：position: relative，负margin，background-image，利用伪元素，但在我看来，绝对定位在语义上是最正确的。