html - Div 100% 宽度减去图像宽度

Question

我正在设计一个移动 html5 网站。

http://jsfiddle.net/ko7o8kkd/

我需要做什么才能让...定义的绿色部分

<div class="toplevelpadding searchbar">

...尽可能多地占用宽度，但右侧的搜索图标仍然在同一行上？

基本上，它应该有 width=100%-(iconwidth + somepadding)。

这是如何做到最好的？它应该尽可能跨浏览器。

感谢任何帮助。

Answer 1

如果图标的宽度和padding是静态的你可以使用css3的calc方法

假设图标 = 50px，总内边距为 20px；

/* Firefox */
    width: -moz-calc(100% - 70px);
/* WebKit */
    width: -webkit-calc(100% - 70px);
/* Opera */
    width: -o-calc(100% - 70px);
/* Standard */
    width: calc(100% - 70px);