Question

这是我的代码：

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    <span>
      <i class="fa fa-check"></i>
      this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .
    </span>

请参阅？检查图标是文本的一部分，我不想要它。我想将所有文本放在彼此之下垂直对齐（在左侧）。我怎么能这样做？

Answer 1

将display:block;添加到您的css中的.fa-check。这将使复选标记成为自己的一行。

Answer 2

您只需添加display: flex;

即可

span {
  display: flex;
}

i.fa-check {
  margin-right: .5rem;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<span>
      <i class="fa fa-check"></i>
      this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .
    </span>

Answer 3

您需要将文本包装在其他元素中，并将图标和文本放在一起。使用flex：

最容易实现这一点

＆＃13;

.container {
  display: flex;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    <div class="container">
      <i class="fa fa-check"></i>
      <span>this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .</span>
    </div>

＆＃13;

据推测，您还想为.container添加一些填充以使其看起来更漂亮。

修改

如果您想在复选标记下方布局，您只需更改弯曲方向：

＆＃13;
＆＃13;
.container { display: flex; flex-direction: column; }
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <i class="fa fa-check"></i> <span>this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .</span> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 4

您可以向右浮动图标。我正在向您展示使用内联样式的方法。您还可以创建一个具有以下行的类：float：right;在它。

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    <span>
      <i class="fa fa-check" style='float:right'></i>
      this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text this is a test text .
    </span>

如何使图标与文本左侧分开？

4 个答案: