Question

有没有办法整齐地对齐句子，第一行的所有单词都在E（回车）下面？

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以浮动箭头并在标签上重置BFC （块格式化上下文）：

＆＃13;

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

＆＃13;

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

＆＃13;

或使用flex：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

像这样在容器div中添加一个类：

<div style="font-family:Arial;font-size:16px;width:300px">
    <div class="same_heights">
        <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>

并将此添加到您的css：

.same_heights{
    display:flex;
}

这样做是告诉你的容器div让它的所有孩子都有相同的高度。这在我编辑你的小提琴时起作用了。

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

2 个答案: