代码之家 › 专栏 › 技术社区 › Smithy

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

css html

Smithy · 技术社区 · 6 年前

如果这段文字被折成新行,我怎么能让它在选中标记旁边留一个左边距呢?所以,任何更长的句子都应该正好在句子的第一个字母下面…所以-当有一个更大的句子时,复选标记下面的空格应该是空的。这是一支笔演示:

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

1 回复 | 直到 6 年前

Chiller 6 年前

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

参见代码段

.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;
}

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