li

Question

我在list-item（li）中得到一个奇怪的文本换行。

检查出来：http://demo.hno-eghlimi.de/#footer

我在li的主要内容之前放置了一个带有图标的span（position：absolute - ＆gt;这是包装的原因）。我不知道为什么里面的文字正在消失。你有解决我问题的方法吗？

Answer 1

你需要改变两件事：

1. 将line-height: 30px;应用于<li>元素。这是因为您的图像高度为30像素。
2. 将vertical-align: bottom;应用于您的<span>并附上图片。这是为了使图像与文本垂直对齐。

此外，这会破坏行之间的填充，因此您可能还想为<li>元素添加一些底部填充/边距。

结果代码：

第1步：

.footer .footer-contact-list li {
  position: relative;
  line-height: 30px; /* add this */
  /* here you may also add some bottom margin/padding */
}

第2步：

.footer .footer-contact-list li span {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #a32020;
  display: inline-block;
  margin: 0 5px 0 0;
  position: relative;
  vertical-align: bottom; /* add this */
}

Answer 2

只需使用以下 function computeTotalDistance(result) { var distance = 0; var myroute = result.routes[0]; for (var i = 0; i < myroute.legs.length; i++) { distance += myroute.legs[i].distance.value; } distance = distance / 1000.0; document.getElementById('distance_road').innerHTML ="Distancija tarp dviejų lokacijų, važiuojant keliais: "+distance + ' km'; CSS

span