代码之家 › 专栏 › 技术社区 › tosi

无法在span元素内对齐ionicons

css html

tosi · 技术社区 · 8 年前

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文件的代码笔:

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

我不确定是否包括 span a内部 跨度 因为图标是正确的方式。但我需要的图标是它自己的元素,所以它可以点击。

2 回复 | 直到 8 年前

P.S. 8 年前

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

只要给消极的 top 规则到 .close 元素,因为默认情况下它们的高度太高。

agrm 8 年前

我会使用绝对定位的关闭图标。这样,它将从文档流中删除,并且不会影响标记/标签的高度。

.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>