我正在尝试使用CSS对这个段落进行对齐。我希望圆形图标(1)在左侧,但不要让后面的句子继续出现在图标下方。我尝试过将它们分开成不同的div,但图标只会出现在段落的顶部。或者margin-left会使“Bold Information”距离第一行的图标太远。有什么想法吗?
<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>