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

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

<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; 
}

如何将元素放在宽度的右边：100％元素？

1 个答案: