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

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

转载作者：行者123 更新时间：2023-11-28 02:54:07

我正在尝试在 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 看起来宽度正确。

最佳答案

我觉得这里有几个问题:

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

文章推荐： php - 在 jQuery 中调用 ajax 时如何访问 PHP 变量？

文章推荐： html - 无法使用打印 css 在最新的 chrome 浏览器中设置页码

文章推荐： javascript - 图表不适合

(highcharts，MVC)错误？

c# - 以正确的方式做 DRY 事情
我有一个包含两个项目的解决方案，每个项目都生成一个单独的 dll，供另一个 Windows 应用程序使用。这些项目中的每一个都有一个名为 MyActions 的类，只有一个这样的方法项目 1
c# - 以正确的方式做 DRY 事情
我有一个包含两个项目的解决方案，每个项目都生成一个单独的 dll，供另一个 Windows 应用程序使用。这些项目中的每一个都有一个名为 MyActions 的类，只有一个这样的方法项目 1
javascript - 一个奇怪的 moment.js 事情
所以我在 if 语句中有这段代码如下 if (!inTime || !moment(inTime).format('m') % 15 === 0) { doSomething(); } 传入的 inT
javascript - 我想做的一件棘手的 javascript 事情...从列表中提取元素并隐藏其余部分
像往常一样，我想做的比我知道的还多:-D 这就是我正在做的事情......我正在写一篇简历。但是在简介中，我想要一个“长简介”和一个“短简介”按钮。长传记显然会显示整个传记，但短传记会捕获列表中的
javascript - 事情。 js 检查 body 是否停止移动
我正在使用物质。 js创建一个二维场景。我在场景中对一个物体施加力，这个物体撞击其他物体，但最终所有物体都因摩擦和能量损失而停止移动。我需要以某种方式检测场景中的所有物体何时停止移动。我发现这样
javascript - 帮助 ajax jquery css 事情
谁能快速浏览一下这段代码，让我知道哪里出错了。在模糊事件中，.textok 类加载正常，但 .textbad 类加载不正常。 .textok { color:#0F0; background
java - 如何让 Gradle 完成一个简单的 makefile 事情
我的情况是这样的:我有一个项目，它使用了一些生成的代码。在生成的代码中，几乎所有文件中都硬编码了某个 URI。因此，在某些时候我得到了两个生成的代码库:一个针对开发，另一个针对暂存。我想通过 Gr
java - Web 应用程序开发人员应该注意哪些对 SEO 不友好的 Java 事情？
这是一个严肃的问题(见我的评论)。问题很简单:Java 所做的所有 SEO 不友好的事情有哪些会导致您的网站在主要搜索引擎中的排名不如应有的好？最佳答案有一个与 JSESSIONID 相关的 s
javascript - 在一些 jquery ajax 之后如何做其他 jquery 事情
我正在使用 PHP。我想完成 jQuery AJAX 进程，(完成进程并数据返回主页后)。然后执行下一个 jQuery 操作。关于如何做到这一点有什么想法吗？ $.ajax({ url: "pa
c++ - 如果我在 _mm_clflushopt() 之后不发出 _mm_sfence() 会发生什么(不好的)事情？
在释放内存之前，我要从 CPU 缓存中逐出内存范围。理想情况下，我只想放弃这些缓存行而不将它们保存到内存中。因为没有人会使用这些值，无论谁再次获得该内存范围(在 malloc()/new/_mm_ma
json - 使用 @ResponseBody 自定义 HttpMessageConverter 来做 Json 事情
我不喜欢 jackson 。我想使用 ajax，但要使用 Google Gson。所以我试图弄清楚如何实现我自己的 HttpMessageConverter 以将其与 @ResponseBody

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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