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

时间:2016-02-24 11:41:01

标签: javascript css

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

HTML:

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

CSS:

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

5 个答案:

答案 0 :(得分:1)

假设你知道&#39; @&#39;的宽度。这可以通过calc()translateX一起完成。

假设&#39; @&#39; char是15px宽:

1)设置宽度为容器的100%减去自己的宽度(15px)width: calc(100% - 15px);

2)现在translateX将按照我们希望的方式对其进行操作translateX(0%)&#39; @&#39;在输入的开头和translateX(100%)&#39; @&#39;最后。

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

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

&#13;
&#13;
#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;
}
&#13;
<div id="testContainer">
  <input id="test3" />
</div>
&#13;
&#13;
&#13;

此处another example demo使用相同的原则:

答案 1 :(得分:1)

您可以像这样使用之前和之后的元素:

<强> HTML

"Already connected to Alfresco with the " +
                    "connection id (" + connectionName + ")"7

<强> CSS

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

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

[编辑]刚刚清理了CSS

答案 2 :(得分:0)

你可以尝试这段代码:

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

使用这种CSS样式:

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

答案 3 :(得分:0)

使用负边距怎么样?

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

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

答案 4 :(得分:0)

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

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

因此,如果您的percentage变量为80%,则上述结果将为calc(80% - 16px)。如果您不熟悉它,则只需将元素设置为计算值。

如果加载条效果确实是您所需要的,此解决方案非常有效。从0%开始,它会显示calc(0% - 0)和100%calc(100% - 20px)。当然要减去的像素的实际数量取决于你的移动元素的大小,但原理是相同的。

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