html - li

html - li,第1张

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

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

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

最佳答案:

2 个答案:

答案 0 :(得分:5)

你需要改变两件事:

  1. line-height: 30px;应用于<li>元素。这是因为您的图像高度为30像素。
  2. vertical-align: bottom;应用于您的<span>并附上图片。这是为了使图像与文本垂直对齐。
  3. 此外,这会破坏行之间的填充,因此您可能还想为<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 */
    }
    

    答案 1 :(得分:1)

    只需使用以下 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
    本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复