CSS 样式定位问题

Question

我创建了一个 AngularJs 指令来清除输入字段。我希望将“close”图标放置在相应的输入元素内。但是它超出了输入字段。

这是 plnkr - https://plnkr.co/edit/WHjRviyuYfFVfg2TnVUP?p=preview

Note:请通过调整大小检查 plnkr 预览。

Answer 1

像这样更改您的 .wrapper class：

.wrapper {
  position: relative;
  display: inline-block;
}

Answer 2

由于输入标签不是容器标签，您需要将输入标签和关闭标签包裹在div中。

var app = angular.module("myApp", []);

app.controller("MyController", function($scope) {
    $scope.fname = "Hello!!"
    $scope.lname = "World";
 })
.directive('clearField', function($compile) {
 return {
   restrict: 'A',
   scope: {
     model: '=ngModel'
   },
   link: function(scope, element, attr) {
     // Add wrapper to the element
     scope.model = (scope.model == undefined) ? "" : scope.model;

     element.wrap('<span class="wrapper"></span>')
     .addClass('pr14')
     .after('<span class="clear">×</span>');

     var clearInputElement = angular.element(element.next());

     clearInputElement.bind('click', function() {
       scope.$apply(scope.model = "");
     });

     scope.$watch('model', function() {
       if (scope.model.length > 0) {
         clearInputElement.css("visibility", "visible");
       } else {
         clearInputElement.css("visibility", "hidden");
       }
     });
   }
 }
});

.wrapper {
  position: relative;
}

.pr14 {
  padding-right: 17px;
}

.clear {
  position: absolute;
  right: 7px;
  color: grey;
  font-size: 17px;
}

.clear:hover {
  cursor: pointer;
  color: blue;
}
.wrap{position:relative;}

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body ng-controller="MyController">
  <div class="wrap">
    <label>Name: </label>
    <input type="text" ng-model="fname" clear-field>
  </div>
  <br>
  <div class="wrap">
    <textarea  ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
  </div>
</body>

</html>

Answer 3

var app = angular.module("myApp", []);

app.controller("MyController", function($scope) {
    $scope.fname = "Hello!!"
    $scope.lname = "World";
 })
.directive('clearField', function($compile) {
 return {
   restrict: 'A',
   scope: {
     model: '=ngModel'
   },
   link: function(scope, element, attr) {
     // Add wrapper to the element
     scope.model = (scope.model == undefined) ? "" : scope.model;

     element.wrap('<span class="wrapper"></span>')
     .addClass('pr14')
     .after('<span class="clear">×</span>');

     var clearInputElement = angular.element(element.next());

     clearInputElement.bind('click', function() {
       scope.$apply(scope.model = "");
     });

     scope.$watch('model', function() {
       if (scope.model.length > 0) {
         clearInputElement.css("visibility", "visible");
       } else {
         clearInputElement.css("visibility", "hidden");
       }
     });
   }
 }
});

.wrapper {
  position: relative;
  display: inline-block
}

.pr14 {
  padding-right: 17px;
}

.clear {
  position: absolute;
  right: 7px;
  color: grey;
  font-size: 17px;
}

.clear:hover {
  cursor: pointer;
  color: blue;
}

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body ng-controller="MyController">
  <label>Name: </label>
  <input type="text" ng-model="fname" clear-field>
  <textarea  ng-model="lname" id="" cols="30" rows="10" clear-field></textarea>
</body>

</html>

CSS 样式定位问题

CSS Style Positioning Issue

css

angular-directive