Question

我有一个包含一些文字和一个按钮的div。

当我点击按钮时，它会根据由ng-if控制的标准消失，但这会导致文本向上移动几个px！

我似乎无法让它留在同一个地方。有什么想法吗？

这是HTML的样子：

<div class="review-helpful">
  <span ng-if="showThis">Howdy there partner!</span>
  <span ng-if="!showThis">How they hanging?</span>
  <button ng-if="showThis" type="button" class="btn btn-default btn-helpful" ng-click="setShowThis(false)">Yes</button>
</div>

这是CSS：

.review-helpful {
    margin-top: 5px;
    min-height: 23px;
    font-size: 12px;
    color: #696969;
}

.btn-helpful {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
}

我已经联系了一个plnkr来显示确切的问题：http://plnkr.co/edit/9FqzhB3NJXHHnHtdfVvB

Answer 1

按钮的高度大于跨度中文本的高度。

可能有一百万种方法可以解决它。一种方法是使用line-height样式：

.review-helpful {
    margin-top: 5px;
    min-height: 23px;
    font-size: 12px;
    color: #696969;
    line-height: 24px;
}

当使用AngularJS ng-if移除同一div中的按钮时，div中的文本向上移动

1 个答案: