插入人力资源元素

Question

我想在同一行中间使用hr。

样本：

<p style="text-align: left;">TEST <span style="float: right;" >A 200T</span></p><hr>

结果：

试验A 200 T

​

但我想要这样..。

​

​

我不能把<hr>放在和这张图片一样的线上。我在这个问题上找不到足够的资料。

Answer 1

​

​

有用文档

css grid layout：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

grid-template-columns：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns，

min-content：https://developer.mozilla.org/en-US/docs/Web/CSS/min-content

​

#container {
    /* for this project we are using css grid */
    display: grid;
    /* text: auto width (minumum width possible)
       hr: 1fr (max width possible)
       text: auto width (minumum width possible)
    */
    grid-template-columns: auto 1fr auto;
    /* margin between elements */
    gap: 1rem;
    /* centering */
    align-items: center;
}

#container hr {
    /* removing the bug of invisible hr */
    margin: 0;
    /* removing the bug of hr take all height (because of css grid) */
    height: min-content;
}

    <div id="container">
        <p>hello</p>
        <hr>
        <p>world</p>
    </div>

​