html - 使用边框属性时如何将 anchor 标记中的文本保持在同一位置

Question

我计划使用 Bootstrap 的 Scrollspy 组件来处理 <ul>元素。

我的问题是当我使用 border-left <li> 上的属性(property)元素， anchor 标记中的文本向右移动了一点。

我该怎么做才能解决这个问题？

请看笔:

https://codepen.io/AshNaz87/pen/QmVJVY

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

li {
  list-style: none;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}

li:last-child {
  margin: 0;
}

.with-border {
  border-left: 3px solid grey;
}

a {
  text-decoration: none;
  color: #000;
}

<div class="wrapper">
  <ul class="nav">
    <li class="with-border"><a href="#">Fortune</a></li>
    <li><a href="#">Favours</a></li>
    <li><a href="#">The</a></li>
    <li class="with-border"><a href="#">Brave</a></li>
  </ul>
</div>

Answer 1

您看到文本偏移不一致的原因是元素的边框实际上占用了布局中的物理空间。为避免这种情况，您需要考虑边框占用的空间(参见解决方案 1)，或使用不改变文档流的替代策略(参见解决方案 2 和 3)。

您可以使用:

1. 所有元素的透明左边框<li> ,
2. background-image在视觉上模仿边框，或者
3. 绝对定位的伪元素

---

方案一:透明左边框

此解决方案意味着在所有 <li> 上引入透明边框元素，只需更改 border-color需要时的属性:

li {
  border-left: 3px solid transparent;
}

li.with-border {
  border-color: grey;
}

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

li {
  border-left: 3px solid transparent;
  list-style: none;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}

li:last-child {
  margin: 0;
}

li.with-border {
  border-color: grey;
}

a {
  text-decoration: none;
  color: #000;
}

<div class="wrapper">
  <ul class="nav">
    <li class="with-border"><a href="#">Fortune</a></li>
    <li><a href="#">Favours</a></li>
    <li><a href="#">The</a></li>
    <li class="with-border"><a href="#">Brave</a></li>
  </ul>
</div>

---

解决方案 2:模拟边框的背景图像

或者，您可以使用线性渐变作为具有清晰划分的边界/断点的背景图像，以在视觉上模仿边界:

li.with-border {
  background-image: linear-gradient(90deg, grey 3%, transparent 3%);
}

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

li {
  list-style: none;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}

li:last-child {
  margin: 0;
}

li.with-border {
  background-image: linear-gradient(90deg, grey 3%, transparent 3%);
}

a {
  text-decoration: none;
  color: #000;
}

<div class="wrapper">
  <ul class="nav">
    <li class="with-border"><a href="#">Fortune</a></li>
    <li><a href="#">Favours</a></li>
    <li><a href="#">The</a></li>
    <li class="with-border"><a href="#">Brave</a></li>
  </ul>
</div>

---

方案三:绝对定位伪元素

这个解决方案是最冗长的一个:它使用了一个绝对定位在 <li> 中的生成的伪元素。元素在视觉上模仿边框:

li {
  position: relative;
}

li::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  display: none;
  content: '';
  background-color: grey;
}

li.with-border::before {
  display: block;
}

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

li {
  position: relative;
  list-style: none;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
}

li:last-child {
  margin: 0;
}

li::before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  display: none;
  content: '';
  background-color: grey;
}

li.with-border::before {
  display: block;
}

a {
  text-decoration: none;
  color: #000;
}

<div class="wrapper">
  <ul class="nav">
    <li class="with-border"><a href="#">Fortune</a></li>
    <li><a href="#">Favours</a></li>
    <li><a href="#">The</a></li>
    <li class="with-border"><a href="#">Brave</a></li>
  </ul>
</div>