Question

我试图通过使用兄弟选择器和border-left来创建元素之间的边界，但是边框的长度等于元素的高度，这不是我想要的。

我认为可以添加一个:after元素，绝对定位它，并使其长度减半，因此border-left看起来不错，但似乎不可能有{{} 1 {} :after？

Answer 1

如果我理解得很好，你想要这样的东西吗？

/*
 * Base styles, just for the sake of appearance.
 *
 * You can safely skip to the second half of the CSS.
 */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

ul li {
  float: left;
  background: #ddd;
  color: #333;
  padding: 10px;
}


/*
 * This is the important part.
 */

ul li + li {
  position: relative;
}

ul li + li:after {
  position: absolute;
  content: '';

  /* Border color. */
  background: #999;

  /* Border dimensions. */
  height: 50%;
  width: 1px;

  /* Border position. */
  left: 0;
  top: 25%;
}

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
</ul>

说明

Simplified TL; DR： position: relative;导致position: absolute;内的任何position: relative;位于元素边缘<body>，而不是{{} 1}}。

（JSFiddle）

我认为如果你自己看到它会更容易理解差异。由于我懒得写一面文字，看看这两张图片（source）：

元素之间的边界，即元素高度的一半

1 个答案:

说明