将内容与图标适配到同一列中

Question

当我按照另一个示例进行操作时，我发现它在我的情况下无法正常工作。我使用了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>

- Peter G.

---

这可能是 这个 的重复。 - Clemens Himmer

Answer 1

您可以在包含的 div 元素上使用正 margin-left，并在子元素 img 上使用负 margin-left，将其移动到文本左侧，如下所示：

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>

- Rory McCrossan

Answer 2

有几种方法可以实现这一点，Rory 已经向您展示了其中一种。另一种方法是添加一个 position 属性 值为 relative 到主要(parent element)元素中，如下所示，然后在 .fa 中添加一个 position 属性 值为 absolute ，这样您就可以使用 left 和 负值 来定位它。

注意: 要使文本围绕图标环绕，请将 .fa 浮动到左侧，然后使用 margins 调整图标和文本之间的间距。

.main {  
  width: 200px;
  margin-left: 50px;
  position: relative;
  }


.fa {
  position: absolute;
  left: -25px;
  }

<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 class="main"><i class="fa fa-caret-up"></i><span style="margin-left: 0px;display:block;width:100%">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>

- Sleek Geek