css - 如何将元素放在 width:100% 元素的右侧？

Question

这是一个例子：http: //jsfiddle.net/Evatp/1/

HTML：

<input type="text" />

<a href=""></a>

CSS：

input { width:100%; margin-right:-16px; float:left; }

a { display: inline-block; width:16px; height:16px; float:right; background:red; }

为什么负边距不起作用？我需要输入为 100%。

Answer 1

不确定这是否是您所追求的，但您可以执行以下操作：

input { width:calc(100% - 24px); margin-right:-16px; float:left; }

http://jsfiddle.net/Evatp/2/

还要确保为不同的浏览器提供：

width: -moz-calc(100% - 24px);
width: -webkit-calc(100% - 24px);
width: -o-calc(100% - 24px);
width: calc(100% - 24px);

并在此处查看浏览器支持：http ://caniuse.com/#feat=calc

为了更安全的方法，您可以将您的输入放在一个容器 div 中，右侧有一个边距http://jsfiddle.net/Evatp/4/：

<div id = "container">
    <input type="text" />
</div>
<a href=""></a>

#container {
margin-right: 24px;
border: 1px solid blue;
}

input { 
    width: 100%;
    float:left; 
}

a { 
    display: inline-block; 
    width:16px; 
    height:16px; 
    float:right; 
    background:red; 
}