Question

当我跟着另一个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>

Answer 1

您可以在包含margin-left元素上使用正{0}}，在子div上使用否定margin-left将其移至文字左侧，如这样：

＆＃13;

img

＆＃13;

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

＆＃13;

Answer 2

有几种方法可以实现这一目标，而Rory已经向您展示了一个。另一种方法是将position property值relative添加到main（父元素），如下所示，然后将position property值absolute添加到.fa。这样，您就可以left与negative value一起使用，根据需要定位。

注意：要让文字环绕图标，只需将.fa向左移动，然后使用margins调整图标和文字之间的空格。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将内容与图标匹配到列中

2 个答案: