时间戳

首页 > 解决方案 > 使用 CSS 格式化标签

css - 使用 CSS 格式化标签

问题描述

我有以下代码

.adhoc-sort-arrow {
  display: inline-block;
  width: 100%;
  color: #000;
  text-align: center;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: medium;
}

.adhoc-sort-arrow-top {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAGN9z9QAAAATklEQVQI12NgQAKZIIIZiP8D8V5kGbDIfxhHBcr5wIAGMtEF3kJVqsAEdiGZ9R9qGwpwAuKfQPwHysYA/EB8A80UEL4NlQODyVgUoONpAKCTHdQ696ExAAAAAElFTkSuQmCC') no-repeat left 10px;
}
<div class="adhoc-media-col-3">
  <a class="adhoc-sort-arrow adhoc-sort-arrow-top">File Name</a>
</div>

问题是我希望背景箭头出现在文件名标签内的文本旁边。我怎样才能正确定位它？

标签： cssbackground-image

解决方案

您可以调整background-position文本是否始终相同（字体大小、字体系列等）并且您不能更改 html：

.adhoc-sort-arrow {
  display: inline-block;
  width: 100%;
  color: #000;
  text-align: center;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: medium;
}

.adhoc-sort-arrow-top {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAGN9z9QAAAATklEQVQI12NgQAKZIIIZiP8D8V5kGbDIfxhHBcr5wIAGMtEF3kJVqsAEdiGZ9R9qGwpwAuKfQPwHysYA/EB8A80UEL4NlQODyVgUoONpAKCTHdQ696ExAAAAAElFTkSuQmCC') 
  calc(50% - 45px) 50%/10px no-repeat;
/*calc(50% + 45px) to make it on the right*/
}
<div class="adhoc-media-col-3">
  <a class="adhoc-sort-arrow adhoc-sort-arrow-top">File Name</a>
</div>

或者您可以通过引入span标签来调整这样的代码，以防文本是动态的

.adhoc-sort-arrow {
  display: inline-block;
  width: 100%;
  color: #000;
  text-align: center;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: medium;
}

.adhoc-sort-arrow-top span{
  padding:0 15px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAGN9z9QAAAATklEQVQI12NgQAKZIIIZiP8D8V5kGbDIfxhHBcr5wIAGMtEF3kJVqsAEdiGZ9R9qGwpwAuKfQPwHysYA/EB8A80UEL4NlQODyVgUoONpAKCTHdQ696ExAAAAAElFTkSuQmCC') 
  left/10px no-repeat;
}
<div class="adhoc-media-col-3">
  <a class="adhoc-sort-arrow adhoc-sort-arrow-top"><span>File Name</span></a>
</div>
<div class="adhoc-media-col-3">
  <a class="adhoc-sort-arrow adhoc-sort-arrow-top"><span>File Naaaame</span></a>
</div>
<div class="adhoc-media-col-3">
  <a class="adhoc-sort-arrow adhoc-sort-arrow-top"><span>File</span></a>
</div>

推荐阅读