css - 使用 CSS 格式化标签

Question

我有下面的代码

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

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

Answer 1

如果文本始终相同(字体大小、字体系列等)并且您不能更改 html，则可以调整 background-position:

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