Question

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

我希望明确的按钮始终位于文本字段中的确切位置，但随着列的宽度发生变化，我对按钮的绝对定位将不会按照我的意愿进行。

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。 class＆＃34; colStyle＆＃34;是一个responsivegridsystem.com，其中类变为＆＃34; col span_1_of_X＆＃34;，其中X是用户选择的列数。这定义了视图中有多少列设置了该div的宽度。

我认为这里的两个css课程是＆＃34;测试＆＃34;和＆＃34; clearName＆＃34;看起来像：

.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 =＆gt; 80％=＆gt; 20px和200px =＆gt; 80％=＆gt; 40px）。

如果您不想将输入字段设置为外部div（.testing）的宽度，则可以翻转该想法并将外部div（.testing）设置为输入字段的宽度。

为此您可以使用：

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

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

1 个答案: