如何在0％和100％的输入中获得div？

How can I get the @ symbol to be just inside the input at both 100% and 0%? https://jsfiddle.net/v6mcghdd/

如何让@符号在100％和0％的输入内部？ https://jsfiddle.net/v6mcghdd/

HTML:

HTML：

<div id="testContainer">
<div id="test2">@</div>
<input id="test3" />
</div>

CSS:

CSS：

#testContainer{
  display: inline-block;
  position: relative;
}
#test2{
  position: absolute;
  left: 100%;
  z-index:1;
  width: 0px;
}
#test3{
  width: 500px;
}

5 个解决方案

#1

Assuming you know the width of the '@' character this can be done with calc() together with translateX.

假设您知道'@'字符的宽度，可以使用calc（）和translateX来完成。

Assuming the '@' char is 15px wide:

假设'@'字符宽度为15px：

1) Set it with a width of 100% of the container minus its own width (15px) width: calc(100% - 15px);

1）设置宽度为容器的100％减去自己的宽度（15px）宽度：calc（100％ - 15px）;

2) Now translateX will operate on it the way we want it to where at translateX(0%) the '@' is at the beginning of the input and at translateX(100%) the '@' is at the end.

2）现在translateX将按照我们想要的方式运行，在translateX（0％）处，'@'在输入的开头，而在translateX（100％），'@'在结尾处。

3) Make sure to set overflow:hidden on the container

3）确保设置溢出：隐藏在容器上

In the demo below - hover over the input:

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

#testContainer {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
#testContainer:hover:after {
  transform: translateX(100%);
}
#testContainer:after {
  content: '@';
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 15px);
  transform: translateX(0%);
  z-index: 1;
  transition: transform .4s;
}
#test3 {
  width: 500px;
}

<div id="testContainer">
  <input id="test3" />
</div>

Here's another example demo using the same principle:

这是使用相同原理的另一个示例演示：

#2

You can use the before and after elements to it like this:

您可以像这样使用before和after元素：

HTML

HTML

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

CSS

CSS

.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;
}

Here's a pen for you to look at: http://codepen.io/ozrevulsion/pen/KVOJwV

这是一支供你观看的笔：http：//codepen.io/ozrevulsion/pen/KVOJwV

[EDIT] Just cleaned up the CSS a bit

[编辑]刚刚清理了一下CSS

#3

You can try this piece of code:

你可以尝试这段代码：

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

with this CSS style:

使用这种CSS样式：

#testContainer{
  display: inline-block;
  position: relative;
}
#testContainer input{
  text-align: center;
}

#4

How about using a negative margin?

如何使用负保证金？

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

https://jsfiddle.net/v6mcghdd/6/

#5

I'm assuming you want some sort of loading bar effect, where you just set the CSS as a percentage calculated in JavaScript. If so, consider the following.

我假设你想要某种加载条效果，你只需将CSS设置为用JavaScript计算的百分比。如果是这样，请考虑以下事项。

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

So if your percentage variable is say 80%, the above will result in calc(80% - 16px). If you're unfamiliar with it, calc simply sets the element to a calculated value.

因此，如果您的百分比变量为80％，则上述结果将导致计算结果（80％ - 16px）。如果您不熟悉它，则只需将元素设置为计算值。

This solution works pretty well if a loading bar effect is indeed what you need. Since at 0%, it would display calc(0% - 0) and at 100% calc(100% - 20px). Of course the actual amount of the pixels to subtract depends on how big your moving element is, but the principle is the same.

如果加载条效果确实是您需要的，那么此解决方案非常有效。因为在0％时，它将显示calc（0％ - 0）和100％calc（100％ - 20px）。当然，要减去的像素的实际数量取决于移动元素的大小，但原理是相同的。

Can't really think of a pure CSS solution to this.

真的不能想到一个纯CSS的解决方案。

#1