Question

如何让@符号在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;
}

Answer 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;

#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;

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

Answer 2

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

<强> 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

Answer 3

你可以尝试这段代码：

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

使用这种CSS样式：

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

Answer 4

使用负边距怎么样？

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

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

Answer 5

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

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

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

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

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

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

5 个答案: