Question

我正在尝试在CSS中对齐此段。我希望“圆”（1）图标位于左侧，但结尾的句子不要在该图标下方继续。我尝试过将它们分开设置为div，但随后将Icon放在该段落的顶部。否则，左边距将使“粗体信息离第一行的图标太远。有任何想法吗？

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div data-gramm="false" spellcheck="false" style="color: rgb(82, 97, 172); font-family: Lato, serif; font-size: 17px; font-style: normal; font-weight: 300; letter-spacing: 0px; text-align: left; text-decoration: none; vertical-align: top; line-height: 1.3; width: 579px; height: 375px; padding: 20px; min-width: 1px; min-height: 1px; word-wrap: break-word;">

    <span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x"></i><strong class="fa-stack-1x text-primary" style="color: #ffffff">1</strong></span>

    <b> Bold Information </b> en the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing <br>
</body>

</html>

Answer 1

您可以执行此操作，而无需使用超棒的字体（根据您的需要进行调整）

CSS

.number1{
  display: block;
  position: relative;
  padding-left: 40px;
}

.number1:before{
  position: absolute;
  content: "1";
  top:0;
  left:0;
  width: 28px;
  height: 28px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 28px;
  border-radius: 14px;
}

HTML

<span class="number1">your text</span>

DEMO HERE

将段落与FontAwesome图标对齐

1 个答案: