Question

我希望这个红色划线在这个列表中的第1和第2（以及第2和第3）“li”之间同等位置，但是它出现在它上面而不是在左侧。有可能这样做吗？这是一个例子：

这就是我要完成的任务：http://sketchtoy.com/67757539

.main__headers--info ul li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}

.main__headers--info ul li:nth-child(2),
.main__headers--info ul li:nth-child(3) {
  margin-left: 50px;
}

.main__headers--info ul li:nth-child(2)::before {
  content: "";
  display: block;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

Answer 1

我会删除边距，只需添加内联块伪元素：

.main__headers--info > ul > li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}
.main__headers--info > ul > li:not(:first-child)::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

如果伪元素前面的空格让你烦恼，请参见How to remove the space between inline-block elements?。

Answer 2

我修改了笔。

这是演示如果我正确地得到你的问题。

将此css代码添加到第2和第3个li：在元素之前

  position: absolute;
  left: 0;
  width: 100%;

和position: relative到li元素 Codepen

Answer 3

这里，工作示例，将红线放在任何li元素上而不是第一个。

.main__headers--info ul li {
  font-size: 20px;
  list-style: none;
  display: inline-block;
  font-weight: bold;
}

.main__headers--info ul li:nth-child(2),
.main__headers--info ul li:nth-child(3) {
  margin-left: 50px;
}

.main__headers--info ul li:not(:first-of-type)::before {
  content: "";
  display: block;
  border: 1px solid red;
  width: 50px;
}

<div class="main__headers--info">
  <ul>
    <li>lorem lorem</li>
    <li>lorem ipsum</li>
    <li>something</li>
  </ul>
</div>

Answer 4

＆＃13;

.wrapper {
  display: flex;
  margin: 0 auto;
  padding: 0 30px;
  width: 100%; }

.seperator {
  flex-grow: 1;
  flex-shrink: 0;
  margin: 0 1px;
  margin-top: 0 !important; }
  .seperator hr {
    height: 2px;
    background: gray;
    border: none;
    vertical-align: middle; }

＆＃13;

<div class="wrapper">
    <div class="">
       Text
    </div>

    <div class="seperator"><hr></div>

    <div class="">
        Text
    </div>

    <div class="seperator"><hr></div>

    <div class="">
        Text
    </div>
</div>

＆＃13;

如何将这个破折号伪元素放在li之间

4 个答案: