个人中心
gpt4 book ai didi

html - 以绝对位置作为百分比进行定位会把事情放在一个奇怪的地方

转载 作者：行者123 更新时间：2023-11-28 02:54:07 25 4
gpt4 key购买 nike

我正在尝试在 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 会与范围 slider 上的刻度对齐。然而，他们没有。

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

最佳答案

我觉得这里有几个问题:

  1. 如果你定位某些东西绝对，引用容器是设置为 position: relative 的下一个周围元素。所以要在你的 div 中绝对对齐你的跨度，这个需要有一个添加了position:relative
  2. 绝对位置设置跨度的左边框。所以你的“10”将始终通过您输入的右边界。虽然10% 的左边框正好是 100%。
  3. 由于跨度没有定义宽度，text-align: center 将什么都不做(什么的中心？)
  4. 您的输入有边距。根据您使用的盒子模型，它可能要么是 100% 的一部分，要么在外面。

它对我来说是这样的:

  • 精确定位比例项，然后向左放置几个像素(这样数字本身就在现场，而不是左边框)。只有 10 需要再靠左一点(此处为 99.5%)，因为它有两位数字。
  • 在你的刻度周围放一个容器，用填充来反射(reflect)你的 slider 在外端和第一个刻度之间的距离。
  • 为你的秤制作容器relative 所以这是秤元素绝对定位的地方

我添加了一些小的 javascript，这样人们就可以在 slider 移动后直接看到它的值——不过仅用于调试目的。

正确的比例填充在 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>

关于html - 以绝对位置作为百分比进行定位会把事情放在一个奇怪的地方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38033152/

25 4 0
文章推荐： php - 在 jQuery 中调用 ajax 时如何访问 PHP 变量？
文章推荐： html - 无法使用打印 css 在最新的 chrome 浏览器中设置页码
文章推荐： javascript - 如何使用我刚刚放入 jQuery UI Sortable 中的任何表行触发函数？
文章推荐： javascript - 图表不适合
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com