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元素全寬度包括::選擇

回答

相關問題