这是我的 jsfiddle http://jsfiddle.net/7LUV4/
如你所见,
.text {
width: auto;
height: 20px;
outline: none;
-webkit-box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
transition: box-shadow 0.2s ease;
-moz-transition: box-shadow 0.2s ease;
-webkit-transition: box-shadow 0.1s ease;
-ms-transition: box-shadow 0.2s ease;
-o-transition: box-shadow 0.2s ease;
border: 1px solid #CFCACC;
border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
margin: 5px 20px;
word-wrap: break-word;
}
这是我正在使用的代码,它使用 :focus 进行过渡,但问题是,它不会停留在同一位置。它只是从右向左浮动,我该如何解决这个问题?
如果可以的话,好吗?
最佳答案
你可以给 label
适当的样式:
label {
display: inline-block;
width: 120px;
text-align: right;
}
在这里,您将标签显示为内联 block 元素,为其指定精确宽度,并使文本右对齐。因此,您可以将输入很好地对齐。
顺便说一句,像这样设置所有 标签的样式并不好。您最好为表单提供一些 id 并使用 #myForm label
作为选择器。
参见fiddle
关于css - 输入类型文本不在同一位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18253906/