HTML 元素全宽，包括 ::before 选择器答案

【问题标题】：HTML element full width including ::before selectorHTML 元素全宽，包括 ::before 选择器
【发布时间】：2016-09-29 22:48:20
【问题描述】：

所以我有这个示例代码：

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

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

¿我怎样才能拥有一个 100% 宽度的元素，包括 ::before 选择器？我使用 95% 的宽度做了一个解决方法。但这不是一个优雅的解决方案。

【问题讨论】：

你能贴出完整的代码吗...
在宽度上使用 calc()。如果你之前的宽度是 25px：.element-class{width: calc(100% - 30px);} //5px spacing between
给我们您的代码，我们会帮助您

标签： html css css-selectors

【解决方案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>

【讨论】：