父div改变宽度时设置绝对位置

Question

我对 css 中的绝对和相对定位有疑问。我有一个可以查看文件夹的 GUI，用户可以选择查看文件夹的列数，参见图片。在每个文件夹下，我都有一个输入字段，用户可以在其中更改文件夹名称，还有一个用于清除名称的按钮。

我希望清除按钮始终位于文本字段中的确切位置，但是随着列宽的变化，我在按钮上的绝对定位不会按照我的意愿进行。

http://i.imgur.com/Sh0W40o.png - 六列，清除按钮位置正确。 http://i.imgur.com/EBYADqA.png - 三列，按钮位置不正确。

<div ng-class="colStyle" ng-repeat="folder in getFolders(currentFolder)">                               
    <input type="image" ng-src="{{folder.img}}" ng-click="enter(folder)"/>                              
    <div ng-show="showFont && editing" class="testing">
        <input type="text" ng-model="folder.name"/>                                     
        <img class="clearName" src="img/clear.png" ng-click='clearName($index, folder)'/>                               
    </div>                              
</div>

这是用于查看我的文件夹及其文本字段的 HTML。类“colStyle”是一个响应式gridsystem.com，其中类变为“col span_1_of_X”，其中X是用户选择的列数。这定义了视图 ny 中有多少列设置该 div 的宽度。

我认为这里重要的两个 css 类是“测试”和“clearName”，它们看起来像：

.testing{
    position: relative;
    margin: 0px;
    padding: 0px;
}
.clearName{
    position: absolute;
    left : 80%;
    top: 5px;
}

我的问题是 80% 或我选择的任何 % 只擅长列数之一。

如何在清除按钮上设置一个位置，以便在列数发生变化时它始终位于文本字段内的同一位置？

Answer 1

为什么不从输入框的右边开始呢？

让我们假设你想将清除按钮放置在距离右侧 5px 的位置，你可以使用以下样式：

.clearName{
 position: absolute;
 right: 5px;
 top: 5px;
}

这要求输入框使用外层div的全宽。

百分比的使用是动态的，因为它取决于外部 div 的宽度（100px => 80% => 20px 和 200px => 80% => 40px）。

如果不想将输入域设置为外层div（.testing）的宽度，可以翻转思路，将外层div（.testing）设置为输入域的宽度。

为此，您可以使用：

.testing {
  display: table;
  margin: auto;
}