将下一行开头的单词与第一行的第一个字符对齐

Question

有没有办法整齐地文本对齐句子与第2行的所有单词都在E(回车)之下？

.question-arrow {
  display: inline-block;
  width: 25px;
  height: 25px;
  color: #b4c1c8;
  font-weight: bold;
  background-color: #eceff1;
  border-radius: 25px;
  text-align: center;
  line-height: 22px;
  margin-right: 10px;
}

<div style="font-family:Arial;font-size:16px;width:300px">
  <div>
    <div class="question-arrow">&gt;</div>
    <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label>
  </div>
</div>

https://jsfiddle.net/anjanesh/rafop92e/

Answer 1

您可以浮动箭头并在标签上重置BFC (块格式化上下文):

.question-arrow
{
    float:left;
    width:25px;
    height:25px;
    color:#b4c1c8;
    font-weight:bold;
    background-color:#eceff1;
    border-radius:25px;
    text-align:center;
    line-height:22px;
    margin-right:10px;
}
label {
  display:block;
  overflow:hidden;
}

<div style="font-family:Arial;font-size:16px;width:300px">
    <div>
        <div class="question-arrow">&gt;</div>
        <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label>
    </div>
</div>

或使用flex:

.question-arrow
{
    display:inline-block;
    width:25px;
    height:25px;
    color:#b4c1c8;
    font-weight:bold;
    background-color:#eceff1;
    border-radius:25px;
    text-align:center;
    line-height:22px;
    margin-right:10px;
}

<div style="font-family:Arial;font-size:16px;width:300px">
    <div style="display:flex;">
        <div class="question-arrow">&gt;</div>
        <label>Enter the number of customers who might be interested in purchasing your products and/or services each year?</label>
    </div>
</div>