Question

我正在尝试在HTML5范围输入上的刻度线上标记。

我的尝试看起来像这样（JSFiddle）：

<div style="height: 20px; width: 100%;">
  <span style="position: absolute; left: 0%; text-align: center;">0.01</span>
  <span style="position: absolute; left: 9.90991%; text-align: center;">1</span>
  <span style="position: absolute; left: 19.9199%; text-align: center;">2</span>
  <span style="position: absolute; left: 27.027%; text-align: center;">e</span>
  <span style="position: absolute; left: 29.9299%; text-align: center;">3</span>
  <span style="position: absolute; left: 39.9399%; text-align: center;">4</span>
  <span style="position: absolute; left: 49.9499%; text-align: center;">5</span>
  <span style="position: absolute; left: 59.96%; text-align: center;">6</span>
  <span style="position: absolute; left: 69.97%; text-align: center;">7</span>
  <span style="position: absolute; left: 79.98%; text-align: center;">8</span>
  <span style="position: absolute; left: 89.99%; text-align: center;">9</span>
  <span style="position: absolute; left: 100%; text-align: center;">10</span>
</div>
<input type="range" list="ticks" min="0" max="100" style="width: 100%;">
<datalist id="ticks">
  <option>0</option>
  <option>9</option>
  <option>19</option>
  <option>27</option>
  <option>29</option>
  <option>39</option>
  <option>49</option>
  <option>59</option>
  <option>69</option>
  <option>79</option>
  <option>89</option>
  <option>100</option>
</datalist>
</div>

我希望我的span s与我的范围滑块上的刻度线对齐。但是，他们没有。

错位似乎在标签中，而不是范围输入。当我检查Chrome检查器中的元素时，span看起来像是在错误的位置，即使它们的父div看起来宽度合适。

Answer 1

我认为这里有几个问题：

如果您定位绝对值，则引用容器为设置为position: relative的下一个周围元素。所以为了使你的跨度在你的div中绝对对齐，这个需要有一个已添加position: relative
绝对位置设置跨度的左边框。所以你的＆＃34; 10＆＃34;将始终传递您输入的右边框。虽然 10的左边界将是100％的显示。
由于跨度没有定义的宽度，text-align: center将会什么都不做（什么的中心？）
您的输入有保证金。根据您使用它的盒子型号而定要么是100％的一部分，要么是外部的。

它对我来说是这样的：

精确定位缩放项目，然后向左定位几个像素（因此数字本身就在现场而不是它的左边框）。只需要向左侧放置10个（此处为99.5％），因为它有两位数。
用刻度在秤上放一个容器，以反映滑块在外端和第一个刻度之间的距离。
为您的比例relative制作容器，因此这是缩放项目绝对位于

我添加了一些小的javascript，因此可以在移动后直接看到滑块的值 - 但仅用于调试目的。

缩放的正确填充大小介于6-8px之间，适合所有浏览器。

<style>
#scaleContainer {
    padding-left: 8px;
    padding-right: 8px;
}

#scale span {
  margin-left: -4px;
}
</style>
<head>
<body>
<div id="container" style="padding: 10px">
  <div id="sliderContainer" style="width: 100%;">
    <div id="scaleContainer">
      <div id="scale" style="height: 20px; position: relative; width: 100%; margin: auto">
        <span style="position: absolute; left: -0.5%; text-align: center;">0.01</span>
        <span style="position: absolute; left: 10%; text-align: center;">1</span>
        <span style="position: absolute; left: 20%; text-align: center;">2</span>
        <span style="position: absolute; left: 27%; text-align: center;">e</span>
        <span style="position: absolute; left: 30%; text-align: center;">3</span>
        <span style="position: absolute; left: 40%; text-align: center;">4</span>
        <span style="position: absolute; left: 50%; text-align: center;">5</span>
        <span style="position: absolute; left: 60%; text-align: center;">6</span>
        <span style="position: absolute; left: 70%; text-align: center;">7</span>
        <span style="position: absolute; left: 80%; text-align: center;">8</span>
        <span style="position: absolute; left: 90%; text-align: center;">9</span>
        <span style="position: absolute; left: 99.5%; text-align: center;">10</span>
      </div>
    </div>
    <div>
      <div id="slider" style="position: relative">
        <input type="range" list="ticks" min="0" max="100" style="width: 100%; margin: 0;" onchange="updateSliderValue(this.value);">
        <datalist id="ticks">
          <option>0</option>
          <option>10</option>
          <option>20</option>
          <option>27</option>
          <option>30</option>
          <option>40</option>
          <option>50</option>
          <option>60</option>
          <option>70</option>
          <option>80</option>
          <option>90</option>
          <option>100</option>
        </datalist>
      </div>
    </div>
    <div id="showValue">
      <p>Slider value: <span id="sliderValue"></span></p>
    </div>
  </div>

以绝对位置作为百分比定位会使事情处于一个奇怪的地方

1 个答案: