如何让@符号在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;
}
答案 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
在下面的演示中 - 将鼠标悬停在输入上:
#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使用相同的原则:
答案 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;
}
答案 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解决方案。