在li元素中出现奇怪的文本换行

Question

我在列表项(li)内部遇到了奇怪的文本换行问题。

请查看这个链接：http://demo.hno-eghlimi.de/#footer

我在li的主要内容前面放置了一个带有图标的span元素(position: absolute -> 这是换行的原因)。我不知道为什么li内部的文本会向下换行。您有解决我的问题的方法吗？

- user3782541

Answer 1

你需要改变以下两点：

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

另外，这将破坏你行之间的填充，所以你可能还想给 <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 */
}

- alesc

Answer 2

只需使用以下CSS来针对元素进行样式设置：

.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: middle;
  margin: 5px;
}

- Rishabh Shah