Question

所以我有这个示例代码：

<span class="element-class"><input type="text"></span>

.element-class是width:100%; 我有一个带有内容的::before选择器（FontAwesome图标）。但::before选择器的内容与input元素分开。

¿如何拥有包含::before选择器的100％宽度元素？我使用95％的宽度做了一个解决方法。但这不是一个优雅的解决方案。

Answer 1

Flexbox可以做到这一点。

span.element-class {
  display: flex;
}
span.element-class input {
  flex: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="element-class fa fa-search"><input type="text"></span>

HTML元素全宽包括:: before selector

1 个答案: