Question

如果它突破到新行，我怎么能在复选标记旁边创建这个文本左边距？因此，任何较长的句子都应该在该句子的第一个字母下完全破解......所以 - 当有更大的句子时，复选标记下的空格应该保持空白。这是一支笔来证明：

.text {
    margin-left: 35px;
}
.text:before {
    font-family: FontAwesome;
    content: '\f00c';
    font-size: 20px;
    color: red;
    position: relative;
    top: 2px;
    margin-right: 10px;
}

Answer 1

您可以在标记上使用绝对位置，这样它就不会影响文本

请参阅代码段

＆＃13;

.text {
  padding-left: 35px;
  padding-top:5px;
  position: relative
}

.text:before {
  font-family: FontAwesome;
  content: '\f00c';
  font-size: 20px;
  color: red;
  position: absolute;
  top: 0px;
  left: 0px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="text-container">
  <div class="col-sm-4 col-xs-6">
    <p class="text">Small amount of text</p>
  </div>
</div>

<div class="text-container">
  <div class="col-sm-4 col-xs-6">
    <p class="text">Large amount of text and more text lorem This should start under the "Large", and have a left margin, so the space under the checkmark is empty</p>
  </div>
</div>

＆＃13;

不要在复选标记下放置新行文本

1 个答案: