HTML元素全宽度包括::选择

-1

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

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

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

来源

2016-09-29 Victor Casado

你可以张贴在宽度完整的代码... –

使用计算（）。如果您之前的宽度是25px： '.element-class {width：calc（100％ - 30px）;} // 5px间距' –

向我们提供您的代码，我们会帮助您 –

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>

来源

2016-09-29 14:48:20

HTML元素全宽度包括::选择

回答

相关问题