css - 如何使用嵌套 div 在 HTML 和 CSS 中创建测量线

Question

我试图在 div 下以相等的距离添加标记，然后在每个标记下显示文本。

我的代码:

#wrap {
  width: 90%;
  margin-top: 20px;
}

#slider {
  height: 10px;
  background-color: red;
  width: 100%;
}

#markL0,
#markL25,
#markL50,
#markL75,
#markL100,
#markL125,
#markL150,
#markL175,
#markL200 {
  margin-top: -2px;
  font-size: 18px;
  width: 12.5%;
  float: left;
}

#L0,
#L25,
#L50,
#L75,
#L100,
#L125,
#L150,
#L175,
#L200 {
  margin-top: -2px;
  font-size: 10px;
  width: 12.4%;
  float: left;
}

<div id="wrap">

  <div id="slider"></div>
  <div id="markL0">|</div>
  <div id="markL25">|</div>
  <div id="markL50">|</div>
  <div id="markL75">|</div>
  <div id="markL100">|</div>
  <div id="markL125">|</div>
  <div id="markL150">|</div>
  <div id="markL175">|</div>
  <div id="markL200">|</div>

  <div id="L0">0L</div>
  <div id="L25">25L</div>
  <div id="L50">50L</div>
  <div id="L75">75L</div>
  <div id="L100">100L</div>
  <div id="L125">125L</div>
  <div id="L150">150L</div>
  <div id="L175">175L</div>
  <div id="L200">200L</div>

</div>

使用上面的代码，我试图实现这一目标:

目前，它看起来像这样:

我放置了 width:12.5%;，以便从第二个开始的所有 8 个标记可以彼此等距离对齐 (100/8 = 12.5)。

我在这里面临两个问题

1.最后一个标记markL200未显示相邻的其他div 2. 文本 0L 显示在第二个标记下方。它应该低于第一个。

你能告诉我我的代码有什么问题吗？

Answer 1

您有 9 个标记，而不是 8 个。使用 width: calc(100%/9); 并正确调整 slider 的宽度。在本文末尾找到调整后的解决方案。

这是我的想法:

看看 CSS 能带你走多远...

ol {
  width: 90%;
  margin-top: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: section;
  
}

ol::before {
  border-bottom: 10px solid red;
  content: "";
  display: block;
  width: calc(100% / 9 * 8 + 3px);
}

ol li {
  float: left;
  position: relative;
  width: calc(100% / 9);
}

ol li::before {
  content: "|";
  font-size: 18px;
}

ol li::after {
  content: counter(section)"L";
  font-size: 10px;
  position: absolute;
  left: 0;
  bottom: -12px;
  transform: translateX(-50%);
}

ol li:not(:first-child)::after {
  counter-increment: section 25;
}

<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

您调整后的解决方案:

#wrap {
  width: 90%;
  margin-top: 20px;
}

#slider {
  height: 10px;
  background-color: red;
  width: calc(100% / 9 * 8 + 2px);
}

#markL0,
#markL25,
#markL50,
#markL75,
#markL100,
#markL125,
#markL150,
#markL175,
#markL200 {
  margin-top: -2px;
  font-size: 18px;
  width: calc(100% / 9);
  float: left;
}

#L0,
#L25,
#L50,
#L75,
#L100,
#L125,
#L150,
#L175,
#L200 {
  margin-top: -2px;
  font-size: 10px;
  width: calc(100% / 9);
  float: left;
}

<div id="wrap">

  <div id="slider"></div>
  <div id="markL0">|</div>
  <div id="markL25">|</div>
  <div id="markL50">|</div>
  <div id="markL75">|</div>
  <div id="markL100">|</div>
  <div id="markL125">|</div>
  <div id="markL150">|</div>
  <div id="markL175">|</div>
  <div id="markL200">|</div>

  <div id="L0">0L</div>
  <div id="L25">25L</div>
  <div id="L50">50L</div>
  <div id="L75">75L</div>
  <div id="L100">100L</div>
  <div id="L125">125L</div>
  <div id="L150">150L</div>
  <div id="L175">175L</div>
  <div id="L200">200L</div>

</div>

顺便说一句，不要将 id 用于样式目的。如果许多元素共享相同的样式，请使用 css 类:

.wrap {
  width: 90%;
  margin-top: 20px;
}

.slider {
  border-bottom: 10px solid red;
  width: calc(100% / 9 * 8 + 3px);
}

.mark,
.L {
  margin-top: -2px;
  width: calc(100% / 9);
  float: left;
}

.mark {
  font-size: 18px;
}

.L {
  font-size: 10px;
}

<div class="wrap">

    <div class="slider"></div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>
    <div class="mark">|</div>

    <div class="L">0L</div>
    <div class="L">25L</div>
    <div class="L">50L</div>
    <div class="L">75L</div>
    <div class="L">100L</div>
    <div class="L">125L</div>
    <div class="L">150L</div>
    <div class="L">175L</div>
    <div class="L">200L</div>

  </div>