Javascript 我怎样才能在输入中得到一个0%和100%的div？

如何使@符号正好位于输入的100%和0%范围内

HTML:

---

您可以尝试以下代码：

<div id="testContainer">
<input type="text" name="email" id="test01" value="@">
</div>

---

使用负边距怎么样

#test2{
  position: absolute;
  left: 100%;
  z-index:1;
  width: 0px;
  margin-left: -15px;
}

---

我假设您想要某种加载条效果，您只需将CSS设置为JavaScript计算的百分比。如果是，请考虑以下内容：

element.style.left = 'calc(' + percentage + '% - ' percentage/5 + 'px)'

因此，如果您的

百分比

变量为80%，上述结果将导致

计算（80%-16px）

。如果您不熟悉，calc只需将元素设置为计算值

如果加载条效果确实是您所需要的，那么此解决方案非常有效。由于在0%时，它将显示

calc（0%-0）

和100%

calc（100%-20px）

。当然，要减去的像素的实际数量取决于移动元素的大小，但原理是一样的

---

无法真正想出一个纯CSS解决方案。

假设您知道“@”字符的宽度，可以使用

calc（）

和

translateX

来完成此操作

假设“@”字符的宽度为15px：

1） 将其设置为容器的100%宽度减去其自身的宽度（15px）

width:calc（100%-15px）

2） 现在，
translateX
将按照我们希望的方式对其进行操作，其中，
translateX（0%）
处的“@”位于输入的开头，而
translateX（100%）
处的“@”位于输入的结尾

3） 确保在容器上设置
overflow:hidden

在下面的演示中-将鼠标悬停在输入上方：


#测试容器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
}
#testContainer:悬停：之后{
转化：translateX（100%）；
}
#testContainer:之后{
内容：“@”；
位置：绝对位置；
左：0；
排名：0；
宽度：钙（100%-15px）；
转化：translateX（0%）；
z指数：1；
转变：转变；
}
#测试3{
宽度：500px；
}
您可以像这样使用before和after元素：

HTML

<div class="atBoxContainer">
  <input class="atBox" />
</div>

这里有一支笔供你看：

[编辑]刚刚清理了CSS一点
，所以您希望@符号正好位于输入框的两端？我不相信您可以，不能跨浏览器。唯一可能的方法是在
@
符号之间有一堆空格（
）。@Alex Waters你能详细说明你的问题吗？你想要的是什么（悬停在输入上）-转换介于
translateX（0%）
到
translateX（100%）
是，@zacbrady写的东西。覆盖很重要，这样我就可以用javascript移动div，使其实际匹配输入中的%位置。（它是一个滑块）如果我将其设置为0%，则它位于输入之外。我需要它来映射0-100%的输入。我想他知道他可以设置
left
或
right
属性，但是他想使用单个百分比值在输入范围内移动元素。@GMchris我根据这个问题编辑了这篇文章，我认为他现在需要的内容。我永远也想不到这就是OP的要求。虽然我喜欢，但很酷。这真的很好。非常感谢。
#test2{
  position: absolute;
  left: 100%;
  z-index:1;
  width: 0px;
  margin-left: -15px;
}

element.style.left = 'calc(' + percentage + '% - ' percentage/5 + 'px)'

<div class="atBoxContainer">
  <input class="atBox" />
</div>

.atBox {
  width: 500px;
}

.atBoxContainer:before, .atBoxContainer:after {
  content: '@';
  width: 0px;
  height: 0px;
  position: relative;
  display: inline-block;
}

.atBoxContainer:before {
  left: 10px;
}

.atBoxContainer:after {
  right: 22px;
}