javascript-将内容放入带有图标的列

当我跟随另一个example时,我发现它不适用于我的情况.我使用了Font Awesome图标,它以某种方式干扰了我的CSS.

我应该采取什么步骤使文本段落从左边框和图标开始等距缩进(以像素为单位)？

建议的解决方案在这种情况下不起作用：

#left {
    float:left;
    width:7px;
}
#right {
    width: 100%;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div style="width:200px"><i class="fa fa-caret-up" id="left" style="display:block;vertical-align: top;margin-top:3px"></i><span id="right" style="margin-left: 0px;display:block">A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.</span>
</div>

解决方法:

您可以在包含的div元素上使用正的左边距,在子img上使用负的左边距,将其移动到文本的左侧,如下所示：

div {
  width: 200px;
  text-align: justify;
  margin-left: 20px;
}
div .fa {
  float: left;
  width: 10px;
  margin: 3px 0 0 -15px;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

<div>
  <i class="fa fa-caret-up"></i>
  A long description adjacent to the input field that doesn't fit into one line and it has to be broken into multiple lines.
</div>

标签：twitter-bootstrap,font-awesome,css,html,javascript
来源： https://codeday.me/bug/20191119/2034170.html