Question

我有问题，可以使用哪些html标签制作这些行？长线的宽度为135px，短线的宽度为75px。

.vip {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

small {
  font-size: 14px;
  color: #8E98A7;
}

.line-break {
  width: 100%;
}

.red-line {
  width: 135px;
  background-color: #FF193F;
}

.red-line-short {
  width: 75px;
  background-color: #E62E4C;
}

<div class="container">
  <div class="vip">
    <small>CHECK SOME VIP CONTENT</small>
    <div class="line-break"></div>
    <p>VIP объявления</p>
    <div class="line-break"></div>
    <!-- Long line should be here -->
    <div class="line-break"></div>
    <!-- Short line should be here -->
  </div>
</div>

the final result should be like this

感谢您的关注！

Answer 1

您必须为班级分配一个高度，否则它是不可见的。

.line-break {
width: 100%;
height: 5px;
}

Answer 2

您可以在段落上使用border-bottom: 1px solid red; CSS样式，使段落下方有红线

.vip {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    
}
p {
    border-bottom: 1px solid red;
    }
    
small {
    font-size: 14px;
    color: #8E98A7;
}

.line-break {
    width: 100%;
}

.red-line {
    width: 135px;
    background-color: #FF193F;
}

.red-line-short {
    width: 75px;
    background-color: #E62E4C;
}

  <div class="container">
            <div class="vip">
                <small>CHECK SOME VIP CONTENT</small>
                <div class="line-break"></div>
                <p>VIP объявления</p>
                <div class="line-break"></div>
               <!-- Long line should be here -->
                <div class="line-break"></div>
               <!-- Short line should be here -->
            </div>
        </div>

如何在<p>标记下添加红线？

2 个答案: