Question

HTML

<div class="bootstrap-tagsinput">
<span class="tag label label-warning custom-class">label 1<span class="ion-ios-close-empty close"></span></span>
<span class="tag label label-warning custom-class">label 2<span class="ion-ios-close-empty close"></span></span>
</div>

CSS

.bootstrap-tagsinput {
    display:inline-block;
    vertical-align:middle
   }

.bootstrap-tagsinput .tag {
    display:inline-block;
   }

.custom-class { 
   margin: 1px; padding-right: 1.5rem;
   }

.close { 
  font-size: 2rem; position: relative; top: 0.4rem; left: 1rem
  }

这是一个加载了必要的css文件的codepen：

https://codepen.io/anon/pen/ooWwpe

我不确定在图标span内加span是否正确。但我需要将图标作为自己的元素，以便点击它。

帮助将不胜感激。

Answer 1

这是：https://codepen.io/commercialsuicide/pen/vWmZPr

只需向top元素添加否定.close规则，因为默认情况下它们的高度太高。

Answer 2

我会使用绝对定位来关闭图标。这样就可以从文档流程中取出，不会影响标签/标签的高度。

.bootstrap-tagsinput {
  display: inline-block;
  vertical-align: middle;
}

.bootstrap-tagsinput .tag {
  position: relative;
  display: inline-block;
  padding-right: 1.3rem;
}

.custom-class {
  margin: 1px;
  padding-right: 1.5rem;
}
.close {
  font-size: 2rem;
  position: absolute;
  right: .25rem;
  top: -.1rem;
}

<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bootstrap-tagsinput">
  <span class="tag label label-warning custom-class">label 1<span class="ion-ios-close-empty close"></span></span>
  <span class="tag label label-warning custom-class">label 2<span class="ion-ios-close-empty close"></span></span>
</div>

不能在span元素内对齐离子

2 个答案: