在热图例的文本之间定位图像

Question

我有这个热传说：

...但我希望将小数字留给图像，以显示范围。代码如下：

const div = L.DomUtil.create('div', 'info versuch');
div.innerHTML += `${this.min}&nbsp;<i style="background:linear-gradient(to right, #9bc8f6 0%, #08519c 100%);"></i>&nbsp;${this.max}`;

CSS:

.info {
 padding: 4px 4px 4px 5px;
 background: rgba(255, 255, 255, 0.65);
 border-radius: 5px;
}
.versuch {
line-height: 18px;
color: #555;
}

.versuch i {
height: 18px;
width: 200px;
float: left; //image wont show at all if i dont state float
opacity: 1.0;
}

Answer 1

你的 float 是罪魁祸首，尽管它正在做预期的事情，没有它就不会显示，因为 i 作为 inline 元素并不关心没有像@IvanSanchez 所说的内容的宽度，所以更改为 inline-block 并删除 float 瞧。干杯

// const div = L.DomUtil.create('div', 'info versuch');
const min = 1234,
      max = 4321;

document.getElementById('blah').innerHTML = `${min}&nbsp;<i style="background:linear-gradient(to right, #9bc8f6 0%, #08519c 100%);"></i>&nbsp;${max}`;

.info {
  padding: 4px 4px 4px 5px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 5px;
}
.versuch {
  line-height: 18px;
  color: #555;
}

.versuch i {
  height: 18px;
  width: 200px;
  display: inline-block;
}

<div id="blah" class="info versuch"></div>

在热图例的文本之间定位图像

Position image between text for heat legend

html

css

leaflet

angular