如何在0%和100%的输入中获得div?

时间:2022-11-25 14:32:38

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


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


1  

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


0  

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


0  

How about using a negative margin?

如何使用负保证金?

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

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

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

#5


0  

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


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


1  

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


0  

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


0  

How about using a negative margin?

如何使用负保证金?

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

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

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

#5


0  

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的解决方案。