Question

尝试使用我在列表项目中使用的图标来解决令人沮丧的问题。当文本换行到另一行时，它总是在图标下面而不是直接在第一行文本下面。无法解决最新情况。我已经尝试在图标i类中添加一个高度，但它也做了同样的事情。

希望你能够提供帮助。

https://jsfiddle.net/rufusbear/40wr9ngt/

＆＃13;

#facts {
  padding: 0;
  margin: 1% 0 0 0;
  list-style: none;
}
#facts li {
  margin: 2% 17%;
}
#facts i {
  margin-right: 2%;
  font-size: 130%;
}
@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  font-family: Flaticon;
  .font-size: 20px;
  font-style: normal;
  .margin-left: 20px;
}
.flaticon-apple:before {
  content: "\f100";
}
.flaticon-biscuit:before {
  content: "\f101";
}
.flaticon-coffee-cup:before {
  content: "\f102";
}
.flaticon-film:before {
  content: "\f103";
}
.flaticon-gamepad:before {
  content: "\f104";
}
.flaticon-lawn-mower:before {
  content: "\f105";
}

＆＃13;

<ul id="facts">
  <li>
    <i class="flaticon-coffee-cup"></i>
    random text random text random text random text random text
  </li>
</ul>

＆＃13;

Answer 1

更好的方法是使用position: absolulte放置图标，并在<li>上添加一些左缩进。

＆＃13;

#facts {
  padding: 0;
  margin: 1% 0 0 0;
  list-style: none;
}

#facts li {
  position: relative;
  padding-left: 25px;
  margin: 2% 17%;
}

#facts i {
  position: absolute;
  font-size: 130%;
  left: 0;
  top: 0;
}
@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"), url("./Flaticon.woff") format("woff"), url("./Flaticon.ttf") format("truetype"), url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
  font-family: Flaticon;
  .font-size: 20px;
  font-style: normal;
  .margin-left: 20px;
}

.flaticon-apple:before {
  content: "\f100";
}

.flaticon-biscuit:before {
  content: "\f101";
}

.flaticon-coffee-cup:before {
  content: "\f102";
}

.flaticon-film:before {
  content: "\f103";
}

.flaticon-gamepad:before {
  content: "\f104";
}

.flaticon-lawn-mower:before {
  content: "\f105";
}

＆＃13;

<ul id="facts">
  <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li>
  <li><i class="flaticon-coffee-cup"></i>random text random text random text random text random text</li>
</ul>

＆＃13;

Answer 2

不需要感到沮丧，这是一个双线css！请将以下行添加到#facts i

display: block;
float: left;

所以最后一段代码应如下所示：

#facts i {
    margin-right: 2%;
    font-size: 130%;
    display: block;
    float: left;
}

希望这有帮助。

列表项文本保持包装在图标下

2 个答案: