如何将元素放置在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; 
}